如何使用外部函数动态加载elememtUI的级联选择器

elementUI官方文档对级联选择器的动态加载数据介绍的比较简单，我在使用的时候遇到了点坑。

官方文档

从文档中可以看出，动态加载的方法比较简单，代码如下：

我们可以看到，只要给el-cascader组件传入props属性，并在props属性中设置lazy:true，lazyLoad函数即可以开启动态加载，需要注意的是，lazyLoad是一个函数。

遇到的问题

但是在实际的使用中，在data里面定义一个函数显得太过臃肿，我更喜欢在methods里面去定义动态加载数据的方法。但是当将lazyLoad的值设置为一个函数的时候，会提示函数不存在，我们来分析下这个问题的原因及解决方案。

image.png

el-cascader组件中的this

我们可以在lozyLoad函数中输出this，来查看为什么加载数据的方法initData不存在。

      props:{
        checkStrictly : true,
        lazy:true,
        lazyLoad(node,resolve){
          console.log(this,'lazyLoad')
         // this.initData(node,resolve)
        }
      }

el-cascader组件中的this

由上图可以看到，el-cascader组件中的this指向的是组件本身，并不是我们调用组件时候的vue实例，所以，必然无法找到methods里面的函数。

由此引发的问题：由于this指向的不是调用组件时的vue实例，所以我们无法取到当前项目的Vue实例，故所有的全局数据，方法，VUEX里面的数据等等，均无法在动态加载数据时候使用。从这一点出发，这个问题必须要解决。

解决方案

由于vue在实例初始化的时候，data和methods等作为选项对象传入，而data是一个函数，所以我们可以在函数return之前将当前vue实例this保存到that中，然后在lazyLoad函数中，通过that调用initData方法。

  data() {
    let that=this;
    return {
      props:{
        checkStrictly : true,
        lazy:true,
        lazyLoad(node,resolve){
          console.log(this,'lazyLoad')
          console.log(that,'that')
          that.initData(node,resolve)
        }
      }
    }
  },

通过这种方式，我们可以在lazyLoad中使用我们自定义的函数了。