element el-cascader动态加载数据

需求:1.点击下拉框请求一级数据,选择一级请求数据获得二级数据,选择二级数据获得三级数据2.任意一项都能够被选中
实现效果:
element el-cascader动态加载数据
文章图片

【element el-cascader动态加载数据】
实现过程:


数据:
prop: { lazy: true, checkStrictly: true, lazyLoad(node, resolve) { setTimeout(() => { if (node.level == 0) { self.$API.getFirst() .then(res => { const cities = res.data.map((value, i) => ({ value: value.id, label: value.request_name, leaf: node.level >= 2 })); // 通过调用resolve将子节点数据返回,通知组件数据加载完成 resolve(cities); }) .catch(err => { console.log(err); }); } if (node.level == 1) { self.$API.getFirstTwo(node.value).then(res => { const areas = res.data.map((value, i) => ({ value: value.id, label: value.request_name, leaf: node.level >= 2 })); // 通过调用resolve将子节点数据返回,通知组件数据加载完成 resolve(areas); }) .catch(err => { console.log(err); }); } else if (node.level == 2) { self.$API.getFirstTwo(node.value).then(res => { const partys = res.data.map((value, i) => ({ value: value.id, label: value.request_name, leaf: node.level >= 2 })); // 通过调用resolve将子节点数据返回,通知组件数据加载完成 resolve(partys); }) .catch(err => { console.log(err); }); } }, 1000); } },

获取选中数据:
handleChange(event) { let pathvalue = https://www.it610.com/article/this.$refs.sysCascader.getCheckedNodes()[0]; if(event.length==1){ this.secondQuestionName=''; this.questionName=''; this.firstQuestionName=pathvalue.label; }else if(event.length==2){ this.firstQuestionName=''; this.questionName=''; this.secondQuestionName=pathvalue.label; }else if(event.length==3){ this.firstQuestionName=''; this.secondQuestionName=''; this.questionName=pathvalue.label; }},


    推荐阅读