这两天工作需要做一个级联,原本想使用 element-ui 普通级联,后端直接把数据封装好返回就行了,可是发现数据量太大了就想改成动态加载的。然后问题出现了。
依官方例子修改(错误示例)
<el-cascader :props="props"></el-cascader>
<script>
import HttpJson from "../../../utils/requestJson.js"
export default {
data() {
unit:"",
return {
props: {
lazy: true,
lazyLoad (node, resolve) {
let data;
if(node.level == 0){
data = {
deptno:node.value,
};
}else{
data = {
deptno:this.unit,//此处报错(原因this指向的是 props 这个对象)
};
}
HttpJson.post("/userDept/listDept",data).then(res=>{
resolve(res.data.result);
})
}
};
}
};
</script>
依官方例子修改(正确写法)
<el-cascader :props="props"></el-cascader>
<script>
import HttpJson from "../../../utils/requestJson.js"
export default {
data() {
unit:"",
return {
props:{
label: "orgName",
value: "orgCode",
lazy: true,
lazyLoad:((node,resolve)=>{
let data;
if(node.level == 0){
data = {
deptno:node.value,
};
}else{
data = {
deptno:this.unit,//此处this指向是VUE这个实例)
};
}
HttpJson.post("/userDept/listDept",data).then(res=>{
resolve(res.data.result);
})
}
};
}
};
总结
官方给的例子也没有问题,问题在于如果想依照官方文档上的写法获取data中声明的参数就较为困难,所以需要使用第二种方式改变this指向即可