el-tree禁用

最近碰到个需求，两棵el-tree，

• 点击勾选第一棵树， 第二棵树对应的节点自动禁用状态。
• 点击勾选第二棵树， 然后再点击勾选第一棵树，第二棵树对应的勾选状态取消，并且被禁用掉

代码展示

数据结构

"data":[
  {
    "id":2,
    "privilegePid":0,
    "privilegeName":"用户中心",
    "privilegeType":0,
     "menuChildren":[
      {
    "id":11,
    "privilegePid":2,
    "privilegeName":"用户组管理",
    "privilegeType":1,
     "menuChildren":[
        {
           "id":50,
           "privilegePid":11,
           "privilegeName":"用户组-按钮-搜索",
           "privilegeType":2,
        }
     ]
      }
    ]
  }
]

新增

 <div>
      <!-- 默认分配权限 -->
      <h4>默认权限树</h4>
      <el-tree
        ref="defaultTreeRef"
        :data="defaultTreeData"
        show-checkbox
        node-key="id"
        :highlight-current="true"
        :props="defaultProps"
        s
        @check="clickDeafaultLeave"
      />
    </div>
    <div>
      <h4>可分配权限树</h4>
      <el-tree
        ref="distributableTreeRef"
        :data="distributableTreeData"
        show-checkbox
        node-key="id"
        :highlight-current="true"
        :props="defaultProps"
      />
    </div>

data() {
    return {
      defaultTreeData: [],
      distributableTreeData: [],
      addDisabledTree: [],
      defaultProps: {
        children: "menuChildren",
        label: "privilegeName",
      },
      curentModifyList: [],
    };
  },

  methods: {
    search() {
      axios.get("http://localhost:3000/data").then((res) => {
        this.defaultTreeData = deepClone(res.data);
        this.distributableTreeData = deepClone(res.data);
        this.addDisabledAttr(this.distributableTreeData);
      });
    },
    // 给可分配添加disbaled属性
    addDisabledAttr(ids) {
      ids.forEach((item) => {
        this.$set(item, "disabled", false);
        if (item.menuChildren.length > 0) {
          item.menuChildren.forEach((val) => {
            this.$set(val, "disabled", false);
            if (val.menuChildren.length > 0) {
              val.menuChildren.forEach((v) => {
                this.$set(v, "disabled", false);
              });
            }
          });
        }
      });
      this.addDisabledTree = ids;
    },
    // 获取当前点击的全部ID
    getCurrentClickDeafultTreeID(data) {
      console.log("data===>", data);
      let ids = [];
      if (data !== undefined) {
        ids.push(data.id);
        data.menuChildren.forEach((item) => {
          ids.push(item.id);
          if (item.menuChildren.length > 0) {
            item.menuChildren.forEach((val) => {
              ids.push(val.id);
              if (val.menuChildren.length > 0) {
                val.menuChildren.forEach((v) => {
                  ids.push(v.id);
                });
              }
            });
          }
        });
      }
      return ids;
    },
    clickDeafaultLeave(data) {
      let defaultKeys = [
        ...this.getClickDeafultTreeIDList(data),
        ...this.getCurrentClickDeafultTreeID(data),
      ];
      // 渲染可分配树
      this.renderDistrubList(defaultKeys, data);
      // 取消勾选，去除disabled属性
      this.modifyCheckedStatus(data);
    },
    // 点击默认树获取点击的分类D数组
    getClickDeafultTreeIDList(data) {
      let ids = [];
      // 爷爷叶子
      if (data.privilegeType === 0) {
        ids.push(data.id);
      }
      // 爸爸叶子
      else if (data.privilegeType === 1) {
        this.defaultTreeData.forEach((item) => {
          if (data.privilegePid === item.id) {
            ids.push(item.id);
          }
          if (item.menuChildren.length > 0) {
            item.menuChildren.forEach((val) => {
              if (val.id === data.privilegePid) {
                ids.push(id);
              }
              if (val.menuChildren.length > 0) {
                val.menuChildren.forEach((v) => {
                  if (v.id === data.privilegePid) {
                    ids.push(item.id);
                  }
                });
              }
            });
          }
        });
      }
      // 儿子叶子
      else if (data.privilegeType === 2) {
        ids.push(data.id);
      }
      return ids;
    },
    // // 渲染可分配树的
    // // ids 就是当前点击的默认树节点ID
    renderDistrubList(ids, data) {
      ids.push(data.privilegePid);
      // 获取父级和顶级ID
      let allKeys = [...this.getTopId(data), ...ids];
      let keys = [
        ...this.$refs.distributableTreeRef.getCheckedKeys(),
        ...this.$refs.distributableTreeRef.getHalfCheckedKeys(),
      ];
      // 去除可分配树的勾选
      for (let i = 0; i < allKeys.length; i++) {
        const count = allKeys[i];
        if (keys.length > 0) {
          setTimeout(() => {
            let ids = [];
            keys.forEach((item) => {
              if (item === count) {
                ids.push(item);
              }
            });
            ids.forEach((item) => {
              this.$refs.distributableTreeRef.setChecked(item, false, false);
            });
          }, 200);
        }
        this.addDisabledTree.forEach((item) => {
          if (item.id === count) {
            item.disabled = true;
          }
          if (item.menuChildren.length > 0) {
            item.menuChildren.forEach((val) => {
              if (val.id === count) {
                val.disabled = true;
              }
              if (val.menuChildren.length > 0) {
                val.menuChildren.forEach((v) => {
                  if (v.id === count) {
                    v.disabled = true;
                  }
                });
              }
            });
          }
        });
      }
    },
    // 获取到最顶级的ID
    getTopId(data) {
      let fatherId = [];
      this.defaultTreeData.forEach((item) => {
        if (data.privilegePid === item.id) {
          fatherId.push(item.id);
        }
        if (item.menuChildren.length > 0) {
          item.menuChildren.forEach((val) => {
            if (val.id === data.privilegePid) {
              fatherId.push(item.id);
            }
            if (val.menuChildren.length > 0) {
              val.menuChildren.forEach((v) => {
                if (v.id === data.privilegePid) {
                  fatherId.push(item.id);
                }
              });
            }
          });
        }
      });
      return fatherId;
    },
    // // 取消选中的状态
    modifyCheckedStatus(data) {
      console.log(777777, data);
      let defaultKeys = [
        ...this.$refs.defaultTreeRef.getCheckedKeys(),
        ...this.$refs.defaultTreeRef.getHalfCheckedKeys(),
      ];
      if (
        !this.isIncludesAllChecked(
          this.getCurrentClickDeafultTreeID(data),
          defaultKeys
        )
      ) {
        //
        if (data.privilegeType === 0) {
          this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
          console.log("010001---<", this.curentModifyList);
        }
        // 爸爸叶子
        else if (data.privilegeType === 1) {
          // 根据当前选中的节点父亲判断是否还包含在已勾选状态的关联
          if (defaultKeys.includes(data.privilegePid)) {
            this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
            console.log("111111---<", this.curentModifyList);
          } else {
            this.curentModifyList = [
              ...this.getTopId(data),
              ...this.getCurrentClickDeafultTreeID(data),
            ];
          }
        } else if (data.privilegeType === 2) {
          // 判断当前点击的元素父亲是否在勾选的范围内
          if (defaultKeys.includes(data.privilegePid)) {
            this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
            console.log("22222222---<", this.curentModifyList);
          } else if (!defaultKeys.includes(data.privilegePid)) {
            //如果当前点击的元素的父亲在勾选的范围内
            if (defaultKeys.includes(this.getTopId(data)[0])) {
              // 如果他的爷爷在勾选的范围呢
              let ids = [];
              ids.push(data.id);
              ids.push(data.privilegePid);
              this.curentModifyList = ids;
            } else {
              let ids = [];
              ids.push(data.id);
              ids.push(data.privilegePid);
              ids.push(this.getTopId(data)[0]);
              this.curentModifyList = ids;
            }
          }
        }
        for (let i = 0; i < this.curentModifyList.length; i++) {
          const count = this.curentModifyList[i];
          this.addDisabledTree.forEach((item) => {
            if (item.id === count) {
              item.disabled = false;
            }
            if (item.menuChildren.length > 0) {
              item.menuChildren.forEach((val) => {
                if (val.id === count) {
                  val.disabled = false;
                }
                if (val.menuChildren.length > 0) {
                  val.menuChildren.forEach((v) => {
                    if (v.id === count) {
                      v.disabled = false;
                    }
                  });
                }
              });
            }
          });
        }
      }
    },
    // 判断默认树当前取消勾选与原勾选
    // checkedList当前已经勾选的
    // allList全部已勾选的
    isIncludesAllChecked(checkedList, allList) {
      let flag = false;
      for (let i = 0; i < checkedList.length; i++) {
        const conut = checkedList[i];
        if (allList.includes(conut)) {
          flag = true;
        } else {
          flag = false;
        }
      }
      return flag;
    },

编辑

主要是添加了回显方法echoDisbledStatus

 data() {
    return {
      defaultTreeData: [],
      distributableTreeData: [],
      addDisabledTree: [],
      defaultProps: {
        children: "menuChildren",
        label: "privilegeName",
      },
      curentModifyList: [],
      filters: {
        deafult: "1,2,9,26,63,61,62,64,8,60,55,56,57,58,59,7,3",
        opt: "27,28,82,79,80,83,81,29,87,88,85,84,33,35,89,92,91,34,93,94,90,95,36,38,98,78,99,100",
      },
    };
  },

  methods: {
    search() {
      axios.get("http://localhost:3000/data").then((res) => {
        this.defaultTreeData = deepClone(res.data);
        this.distributableTreeData = deepClone(res.data);
        this.addDisabledAttr(this.distributableTreeData);
        // this.$refs.distributableTreeRef.setChecked(item, true, false);
        setTimeout(() => {
          this.filters.deafult
            .split(",")
            .map(Number)
            .forEach((item) => {
              this.$refs.defaultTreeRef.setChecked(item, true, false);
            });
        }, 200);
        setTimeout(() => {
          this.filters.opt
            .split(",")
            .map(Number)
            .forEach((item) => {
              this.$refs.distributableTreeRef.setChecked(item, true, false);
            });
        }, 200);
        this.echoDisbledStatus();
      });
    },
    // 给可分配添加disbaled属性
    addDisabledAttr(ids) {
      ids.forEach((item) => {
        this.$set(item, "disabled", false);
        if (item.menuChildren.length > 0) {
          item.menuChildren.forEach((val) => {
            this.$set(val, "disabled", false);
            if (val.menuChildren.length > 0) {
              val.menuChildren.forEach((v) => {
                this.$set(v, "disabled", false);
              });
            }
          });
        }
      });
      this.addDisabledTree = ids;
    },
    clickDeafaultLeave(data) {
      let defaultKeys = [
        ...this.getClickDeafultTreeIDList(data),
        ...this.getCurrentClickDeafultTreeID(data),
      ];
      // 渲染可分配树
      this.renderDistrubList(defaultKeys, data);
      // 取消勾选，去除disabled属性
      this.modifyCheckedStatus( data);
    },
    // 点击默认树获取点击的分类D数组
    getClickDeafultTreeIDList(data) {
      let ids = [];
      // 爷爷叶子
      if (data.privilegeType === 0) {
        ids.push(data.id);
      }
      // 爸爸叶子
      else if (data.privilegeType === 1) {
        this.defaultTreeData.forEach((item) => {
          if (data.privilegePid === item.id) {
            ids.push(item.id);
          }
          if (item.menuChildren.length > 0) {
            item.menuChildren.forEach((val) => {
              if (val.id === data.privilegePid) {
                ids.push(id);
              }
              if (val.menuChildren.length > 0) {
                val.menuChildren.forEach((v) => {
                  if (v.id === data.privilegePid) {
                    ids.push(item.id);
                  }
                });
              }
            });
          }
        });
      }
      // 儿子叶子
      else if (data.privilegeType === 2) {
        ids.push(data.id);
      }
      return ids;
    },
    // 获取当前点击的全部ID
    getCurrentClickDeafultTreeID(data) {
      // console.log(data);
      let ids = [];
      ids.push(data.id);
      // console.log(data.menuChildren);
      if (data.menuChildren) {
        data.menuChildren.forEach((item) => {
          ids.push(item.id);
          if (item.menuChildren.length > 0) {
            item.menuChildren.forEach((val) => {
              ids.push(val.id);
              if (val.menuChildren.length > 0) {
                val.menuChildren.forEach((v) => {
                  ids.push(v.id);
                });
              }
            });
          }
        });
      }
      return ids;
    },
    // 渲染可分配树的
    // ids 就是当前点击的默认树节点ID
    renderDistrubList(ids, data) {
      ids.push(data.privilegePid);
      // 获取父级和顶级ID
      let allKeys = [...this.getTopId(data), ...ids];
      let keys = [
        ...this.$refs.distributableTreeRef.getCheckedKeys(),
        ...this.$refs.distributableTreeRef.getHalfCheckedKeys(),
      ];
      // 去除可分配树的勾选
      for (let i = 0; i < allKeys.length; i++) {
        const count = allKeys[i];
        if (keys.length > 0) {
          setTimeout(() => {
            let ids = [];
            keys.forEach((item) => {
              if (item === count) {
                ids.push(item);
              }
            });
            ids.forEach((item) => {
              this.$refs.distributableTreeRef.setChecked(item, false, false);
            });
          }, 200);
        }
        this.addDisabledTree.forEach((item) => {
          if (item.id === count) {
            item.disabled = true;
          }
          if (item.menuChildren.length > 0) {
            item.menuChildren.forEach((val) => {
              if (val.id === count) {
                val.disabled = true;
              }
              if (val.menuChildren.length > 0) {
                val.menuChildren.forEach((v) => {
                  if (v.id === count) {
                    v.disabled = true;
                  }
                });
              }
            });
          }
        });
      }
    },
    // 获取到最顶级的ID
    getTopId(data) {
      let fatherId = [];
      this.defaultTreeData.forEach((item) => {
        if (data.privilegePid === item.id) {
          fatherId.push(item.id);
        }
        if (item.menuChildren.length > 0) {
          item.menuChildren.forEach((val) => {
            if (val.id === data.privilegePid) {
              fatherId.push(item.id);
            }
            if (val.menuChildren.length > 0) {
              val.menuChildren.forEach((v) => {
                if (v.id === data.privilegePid) {
                  fatherId.push(item.id);
                }
              });
            }
          });
        }
      });
      return fatherId;
    },
    // 取消选中的状态
    modifyCheckedStatus(data) {
      let defaultKeys = [
        ...this.$refs.defaultTreeRef.getCheckedKeys(),
        ...this.$refs.defaultTreeRef.getHalfCheckedKeys(),
      ];
      if (
        !this.isIncludesAllChecked(
          this.getCurrentClickDeafultTreeID(data),
          defaultKeys
        )
      ) {
        if (data.privilegeType === 0) {
          this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
        }
        // 爸爸叶子
        else if (data.privilegeType === 1) {
          // 根据当前选中的节点父亲判断是否还包含在已勾选状态的关联
          if (defaultKeys.includes(data.privilegePid)) {
            this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
          } else {
            this.curentModifyList = [
              ...this.getTopId(data),
              ...this.getCurrentClickDeafultTreeID(data),
            ];
          }
        } else if (data.privilegeType === 2) {
          // 判断当前点击的元素父亲是否在勾选的范围内
          if (defaultKeys.includes(data.privilegePid)) {
            this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
          } else if (!defaultKeys.includes(data.privilegePid)) {
            //如果当前点击的元素的父亲在勾选的范围内
            // console.log("this.getTopId(data)[0]===>", this.getTopId(data)[0]);
            if (defaultKeys.includes(this.getTopId(data)[0])) {
              // 如果他的爷爷在勾选的范围呢
              let ids = [];
              ids.push(data.id);
              ids.push(data.privilegePid);
              this.curentModifyList = ids;
            } else {
              let ids = [];
              ids.push(data.id);
              ids.push(data.privilegePid);
              ids.push(this.getTopId(data)[0]);
              this.curentModifyList = ids;
            }
          }
        }
        for (let i = 0; i < this.curentModifyList.length; i++) {
          const count = this.curentModifyList[i];
          this.addDisabledTree.forEach((item) => {
            if (item.id === count) {
              item.disabled = false;
            }
            if (item.menuChildren.length > 0) {
              item.menuChildren.forEach((val) => {
                if (val.id === count) {
                  val.disabled = false;
                }
                if (val.menuChildren.length > 0) {
                  val.menuChildren.forEach((v) => {
                    if (v.id === count) {
                      v.disabled = false;
                    }
                  });
                }
              });
            }
          });
        }
      }
    },
    // 判断默认树当前取消勾选与原勾选
    // checkedList当前已经勾选的
    // allList全部已勾选的
    isIncludesAllChecked(checkedList, allList) {
      let flag = false;
      for (let i = 0; i < checkedList.length; i++) {
        const conut = checkedList[i];
        if (allList.includes(conut)) {
          flag = true;
        } else {
          flag = false;
        }
      }
      return flag;
    },

    echoDisbledStatus() {
      let keys = [
        ...this.$refs.distributableTreeRef.getCheckedKeys(),
        ...this.$refs.distributableTreeRef.getHalfCheckedKeys(),
      ];
      let allKeys = this.filters.deafult.split(",").map(Number);
      for (let i = 0; i < allKeys.length; i++) {
        const count = allKeys[i];
        setTimeout(() => {
          let ids = [];
          keys.forEach((item) => {
            if (item === count) {
              ids.push(item);
            }
          });
          ids.forEach((item) => {
            this.$refs.distributableTreeRef.setChecked(item, false, false);
          });
        }, 200);
        this.addDisabledTree.forEach((item) => {
          if (item.id === count) {
            item.disabled = true;
          }
          if (item.menuChildren.length > 0) {
            item.menuChildren.forEach((val) => {
              if (val.id === count) {
                val.disabled = true;
              }
              if (val.menuChildren.length > 0) {
                val.menuChildren.forEach((v) => {
                  if (v.id === count) {
                    v.disabled = true;
                  }
                });
              }
            });
          }
        });
      }
    },
  },