element-ui cascader级联懒加载
![](https://img2022.cnblogs.com/blog/890760/202211/890760-20221116110535196-1398546294.png)
<el-cascader :props="props" :options="options" size="small" style="width: 200px" v-model="RoomAbout" clearable @change="getcascader" ></el-cascader>
RoomAbout: [],
getcascader(v) {
if (v) {
this.associatechForm.buildingId = v[0];
this.associatechForm.floorId = v[1];
this.associatechForm.roomId = v[2];
} else {
this.associatechForm.buildingId = "";
this.associatechForm.floorId = "";
this.associatechForm.roomId = "";
}
},
options: [ // { // label: "name", // }, ], props: { value: "id", label: "name", lazy: true, // emitPath: false, checkStrictly: true, lazyLoad(node, resolve) { if (node.loading) { if (resolve && node.data) { //楼层 selectListbuildingId({ id: node.data.id }).then((res) => { if (node.level == 1) { let d = res.data.data; if (d && d.length > 0) { for (let item of d) { item.level = 1; // item.label = item.name; // item.value = item.id; item.children = undefined; } resolve(d); } else { resolve(); } } if ((node.level == 2 || node.level == 3) && node.loading) { //房间 this.buildingId = node.parent.data.id; selectListRoom({ buildingId: node.parent.data.id, roomFloorId: node.data.id, }).then((res) => { let d = res.data.data; if (d && d.length > 0) { for (let item of d) { item.name = item.roomOwnerName; item.level = 2; // item.value = item.id; item.children = undefined; } resolve(d); } else { resolve(); } }); } }); } } }, },
_loadList() { //楼宇 selectList().then((res) => { if (res.data.code == "00000") { let d = res.data.data; if (d && d.length > 0) { for (let item of d) { item.level = 0; item.label = item.name; item.value = item.id; item.children = undefined; } this.options = d || []; } } }); },
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步