elementUI使用el-cascader如何调取本地函数

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

由上图可以看到，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中使用我们自定义的函数了。

原文地址