element ui cascader级联选择器 动态加载以及回显

当数据比较多的时候，一次性获取全部数据速度太慢，而且体验不太好，所有需要用到懒加载，一级一级的选择数据就能很好避免速度慢的问题。

以及我们使用el-cascader加载默认值的时候,cascader的输入框和联级选择框都会遇到的回显问题。看代码!!!

 import {function1,function2,} from "@/api/xxxxx.js";export default {data(){ return:{ propsData: {//value:'value',//label:'label',//checkStrictly:true,lazy: true,lazyLoad: (node, resolve) => {if (node.level == 0) { this.function1(node, resolve);}else if (node.level == 1) { this.方function2(node, resolve)}} }, id:0, dialogData :{}, channeldata:"", this.dialogVisible :false, },}, methods: { function1(node, resolve) {var that = this;let list=[];function1().then((res) => {/*let str = JSON.stringify(res.Data.list).replace(/属性id/g, 'value'); str = str.replace(/属性名称/g, 'label');list = JSON.parse(str);const nodes = Array.from(list).map((item) => ({ value: item.value,label: item.label, }));*/处理成级联地址允许的属性 label valueresolve(nodes);});}, function2(node, resolve) { var that = this; that.id = node.data.value; let level = node.level; let list=[]; function2(that.id ).then((res) => {let str = JSON.stringify(res.Data.list).replace(/属性id/g, 'value');str = str.replace(/属性Name/g, 'label');list = JSON.parse(str);const nodes = Array.from(list).map((item) => ({ value: item.value, label: item.label, leaf: level >= 1, })); resolve(nodes); }) .catch(error => { resolve(list); }) }, update(scope) {this.dialogData = JSON.parse(JSON.stringify(scope.row));this.channeldata = []; this.channeldata.push(scope.row.ChannelShopId); this.channeldata.push(scope.row.ChannelId);this.dialogVisible = true; },CascaderChange(data) {if (data) { if (data.length == 2) { this.dialogData.Id1 = data[0];this.dialogData.Id2 = data[1];if(this.$refs.myCascaderChannel.getCheckedNodes()[0]) { let list=this.$refs.myCascaderChannel.getCheckedNodes()[0].pathLabels;//获取选中的节点数组 this.showChannel=list[0]+'/'+list[1];}} else {this.$message({ message: '警告哦，xxxxxxxx,请重新选择!!!',type: 'warning' }); }} }, }}

参数说明:
value / v-model 选中项绑定值
options 可选项数据源，键名可通过 Props 属性配置
lazy 是否动态加载子节点，需与 lazyLoad 方法结合使用
lazyload 加载动态数据的方法，仅在 lazy 为 true 时有效

lazyload 方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)

Element的el-cascader（级联器）组件的value容易获取，主要是label。可以通过以下方式获取：

this.$refs.myCascaderChannel.getCheckedNodes()[0].pathLabels;

this.$refs["myCascaderChannel"].getCheckedNodes()[0].label