element el-cascader动态加载数据
需求:1.点击下拉框请求一级数据,选择一级请求数据获得二级数据,选择二级数据获得三级数据2.任意一项都能够被选中
实现效果:
文章图片
【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;
}},
推荐阅读
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 动态组件与v-once指令
- iview|iview upload 动态改变上传参数
- react-navigation|react-navigation 动态修改 tabBar 样式
- K14|K14 9/15销售提问法D2
- 动态|诗歌《在精神科诊室》发《小说与诗》(香港)报
- C语言静态动态两版本通讯录实战源码
- element源码学习二(dev)
- Trie树(动态规划)
- java动态代理技术解析