element-ui懒加载树组件自定义叶子节点选中状态实现

element树组件

 <el-tree
                  ref="tree"
                  :props="props"
                  show-checkbox
                  lazy
                  :data="treeData"
                  :load="loadNode"
                  node-key="id"
                  :default-expanded-keys="expendsKeys"
                  :default-checked-keys="frids"
                ></el-tree>           

实现数据逻辑

 data() {
    return {
      open: "Panel1",
      treeData: [],
      index: 1,
      size: 50,
      props: {
        isLeaf: "leaf"
      },
      frids: [],
      expendsKeys: [],
      otherData: []
    };
  },
  watch: {
    bindgingshow: function(newV, oldV) {
      if (newV == true) {
        this.getServiceInit();
        this.getInit();
      }
    }
  },
  mounted() {
    this.getServiceInit();
  },
  methods: {
    async getInit() {
      const res = await selectConnectEntity({
        tenant_id: this.bindInfo.postalCode
      });
      if (res) {
        let arr = [];
        let arr2 = [];
        res.data.privateData.map(item => {
          arr.push(item.frid);
          arr2.push(item.data.erid, item.data.parent.said);
        });
        this.frids = arr;
        this.expendsKeys = arr2;
        this.otherData = res.data.otherData;
      }
    },
    async getServiceInit() {
      let initdata = {
        index: this.index,
        size: this.size,
        key: "said",
        condition: "jfyw_fwq",
        bk_obj_id: "jfyw_fwq"
      };
      const res = await getBeanData(initdata);
      if (res) {
        let data = res.data.info;
        let arr = [];
        let arr2 = [];
        data.map(item => {
          let obj = {
            label: item.sname,
            sname: item.sname,
            said: item.said,
            id: item.said,
            leaf: false,
            children: []
          };
          arr2.push({ said: item.said });
          arr.push(obj);
        });
        this.treeData = arr;
      }
    },
    async getFrameInit(said) {
      let initdata = {
        index: this.index,
        size: this.size,
        upObkId: "jfyw_fwq",
        key: "erid",
        foreignKey: "said",
        condition: "jfyw_jf",
        conditions: [
          {
            field: "said",
            operator: "$regex",
            value: said
          }
        ],
        bk_obj_id: "jfyw_jf"
      };
      const res = await getBeanData(initdata);
      return res;
    },
    async getEridInit(erid) {
      let initdata = {
        index: this.index,
        size: this.size,
        upObkId: "jfyw_jf",
        key: "frid",
        foreignKey: "erid",
        condition: "jfyw_jj",
        conditions: [
          {
            field: "erid",
            operator: "$regex",
            value: erid
          }
        ],
        bk_obj_id: "jfyw_jj"
      };
      const res = await getBeanData(initdata);
      return res;
    },
    loadNode(item, resolve) {
      if (Object.keys(item.data).includes("erid")) {
        //机架
        let info = item.data.erid;
        const { erid, name, parent } = item.data;
        this.getEridInit(erid).then(res => {
          if (res) {
            let data = res.data.info;
            //过滤其他租户已绑定数据
            this.otherData.map(item => {
              data = data.filter(option => option.frid != item.frid);
            });
            let arr = [];
            if (data.length > 0) {
              data.map(item => {
                let obj = {
                  label: item.fname,
                  fname: item.fname,
                  leaf: true,
                  frid: item.frid,
                  id: item.frid,
                  parents: {
                    erid,
                    name,
                    ...parent,
                    fname: item.fname,
                    frid: item.frid,
                    ou: this.bindInfo.ou
                  }
                };
                arr.push(obj);
              });
              resolve(arr);
            } else {
              let obj = {
                label: "暂无数据",
                leaf: true,
                disabled: true
              };
              resolve([obj]);
            }
          }
        });
      } else {
        //机房
        const { said, sname } = item.data;
        if (said) {
          this.getFrameInit(said).then(res => {
            if (res) {
              let data = res.data.info;
              let arr = [];
              data.map(item => {
                let obj = {
                  label: item.name,
                  erid: item.erid,
                  name: item.name,
                  leaf: false,
                  id: item.erid,
                  children: [],
                  parent: {
                    sname,
                    said
                  }
                };
                arr.push(obj);
              });
              resolve(arr);
            }
          });
        }
      }
    },
    closebinddrawer() {
      this.$emit("closebinddrawer", false);
    },
    async addFrame(arr) {
      let data = {
        tenant_id: this.bindInfo.postalCode,
        connectEntityList: arr
      };
      const res = await InsertTenantJJ(data);
      if (res.code == 0) {
        this.$Message.success("绑定成功");
      }
    },
    saveBind() {
      let nodes = this.$refs.tree.getCheckedNodes();
      let arr = [];
      nodes.map((item, index) => {
        if (item.parents) {
          arr.push(item.parents);
        }
      });
      this.addFrame(arr);
      this.$emit("saveBind", false);
    },
    cancelBind() {
      this.$emit("cancelBind", false);
    }
  }