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

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

官方文档

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

<el-cascader :props="props"></el-cascader>

<script>
  let id = 0;

  export default {
    data() {
      return {
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

我们可以看到，只要给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

由此引发的问题：由于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中使用我们自定义的函数了。