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中使用我们自定义的函数了。
