element el-cascader动态加载数据
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
需求:1.点击下拉框请求一级数据,选择一级请求数据获得二级数据,选择二级数据获得三级数据 2.任意一项都能够被选中
实现效果:
实现过程:
<el-cascader
v-model="partyOrganId"
:show-all-levels="false"
ref="sysCascader"
:props="prop"
@change="handleChange($event)"
clearable>
</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 != 0 ) {
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);
});
}
}, 1000);
}
},
获取选中数据:
handleChange(event) {
let pathvalue = 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;
}
},
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)