element-ui cascader级联懒加载

 

<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 || [];
          }
        }
      });
    },

 

posted @ 2022-11-16 11:07  abcByme  阅读(125)  评论(1编辑  收藏  举报