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