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,
        }
     ]
      }
    ]
  }
]
 <el-tree ref="treeRef" :data="menuTreeData" :highlight-current="true" :props="defaultProps" node-key="id" show-checkbox @check="handleMenuTree" />
 
 <el-tree ref="distributableTreeRef" :data="distributableTreeData" :highlight-current="true" :props="defaultProps" node-key="id" show-checkbox @check="handleDistributableTree" />
新增
 //给可分配权限节点全部置灰
    //ids：可分配权限树  list：菜单权限树
    setDistributableTreeDisabledStatus(ids, list) {
      if (ids) {
        ids.forEach((item) => {
          this.distributableTreeDataList.push(item);
          this.$set(item, "disabled", true);
          if (item.menuChildren.length > 0) {
            item.menuChildren.forEach((val) => {
              this.distributableTreeDataList.push(val);
              this.$set(val, "disabled", true);
              if (val.menuChildren.length > 0) {
                val.menuChildren.forEach((v) => {
                  this.distributableTreeDataList.push(v);
                  this.$set(v, "disabled", true);
                });
              }
            });
          }
        });
      }
      if (list) {
        list.forEach((item) => {
          this.menuTreeDataList.push(item);
          if (item.menuChildren.length > 0) {
            item.menuChildren.forEach((val) => {
              this.menuTreeDataList.push(val);
              if (val.menuChildren.length > 0) {
                val.menuChildren.forEach((v) => {
                  this.menuTreeDataList.push(v);
                });
              }
            });
          }
        });
      }
    },
    /* -----------------菜单权限操作------------------------*/
    //获取
    handleMenuTree(data, node) {
      let checkedNodeList = [...node.checkedKeys, ...node.halfCheckedKeys];
      // console.log('checkedNodeList==>', checkedNodeList)
      //如果取消节点
      if (this.isTreeMenuChecked(data)) {
        console.log("取消节点~~~~~~~~~~");
        if (data.privilegeType === 0) {
          this.cancelDistributableTreeCheckedStatus(this.getAllOptIdList(data));
        } else if (data.privilegeType === 1) {
          //如果点击的父ID 和爷爷ID 不在 所有的节点中，则表示全部都取消了
          if (
            !checkedNodeList.includes(data.privilegePid) &&
            !checkedNodeList.includes(data.privilegePid)
          ) {
            console.log("privilegeType===1-----父亲和爷爷都不存在！！");
            const tempIds = [];
            tempIds.push(data.privilegePid);
            let ids = [
              ...this.getAllOptIdList(data),
              ...tempIds,
              ...[this.findGrandFatherId(data.privilegePid)],
            ];
            this.cancelDistributableTreeCheckedStatus(ids);
          }
          if (
            !checkedNodeList.includes(data.privilegePid) &&
            checkedNodeList.includes(data.privilegePid)
          ) {
            console.log("privilegeType===1-----父亲不存在，但是爷爷存在~~~~");
            const tempIds = [];
            tempIds.push(data.privilegePid);
            let ids = [...this.getAllOptIdList(data), ...tempIds];
            this.cancelDistributableTreeCheckedStatus(ids);
          }
          if (
            checkedNodeList.includes(data.privilegePid) &&
            checkedNodeList.includes(data.privilegePid)
          ) {
            console.log("privilegeType===1-----父亲存在 && 爷爷也存在~~~~~");
            this.cancelDistributableTreeCheckedStatus(
              this.getAllOptIdList(data)
            );
          }
        } else if (data.privilegeType === 2) {
          //如果点击的父ID 和 爷爷ID 都不在 所有的节点中，则表示全部都取消了
          if (
            !checkedNodeList.includes(data.privilegePid) &&
            !checkedNodeList.includes(this.findGrandFatherId(data.privilegePid))
          ) {
            console.log("privilegeType===2-----父亲和爷爷都不存在！！");
            const tempIds = [];
            tempIds.push(data.privilegePid);
            let ids = [
              ...this.getAllOptIdList(data),
              ...tempIds,
              ...[this.findGrandFatherId(data.privilegePid)],
            ];
            this.cancelDistributableTreeCheckedStatus(ids);
          }
          if (
            !checkedNodeList.includes(data.privilegePid) &&
            checkedNodeList.includes(this.findGrandFatherId(data.privilegePid))
          ) {
            console.log("privilegeType===2-----父亲不存在，但是爷爷存在~~~~");
            const tempIds = [];
            tempIds.push(data.privilegePid);
            let ids = [...this.getAllOptIdList(data), ...tempIds];
            this.cancelDistributableTreeCheckedStatus(ids);
          }
          if (
            checkedNodeList.includes(data.privilegePid) &&
            checkedNodeList.includes(this.findGrandFatherId(data.privilegePid))
          ) {
            console.log("privilegeType===2-----父亲存在 && 爷爷也存在~~~~~");
            this.cancelDistributableTreeCheckedStatus(
              this.getAllOptIdList(data)
            );
          }
        }
      } else {
        let defaultKeys = [
          ...this.$refs.distributableTreeRef.getCheckedKeys(),
          ...this.$refs.distributableTreeRef.getHalfCheckedKeys(),
        ];
        //选中节点 data.privilegeType.对可分配树的勾选数据进行去重
        if (data.privilegeType === 0) {
          this.renderDistributableTreeCheckedStatus(this.getAllOptIdList(data));
        } else if (data.privilegeType === 1) {
          const ids = [...checkedNodeList, this.getAllOptIdList(data)];
          this.renderDistributableTreeCheckedStatus(chooseNonRepeatingData(ids,defaultKeys));
        } else if (data.privilegeType === 2) {
          const ids = [...checkedNodeList, this.getAllOptIdList(data)];
          this.renderDistributableTreeCheckedStatus(chooseNonRepeatingData(ids,defaultKeys));
        }
      }
    },
    //当权限树被点击的时候，渲染可分配树为勾选状态
    renderDistributableTreeCheckedStatus(selectedMenuTreeIdList) {
      this.distributableTreeDataList.forEach((item) => {
        selectedMenuTreeIdList.forEach((val) => {
          if (val === item.id) {
            item.disabled = false;
            this.$refs.distributableTreeRef.setChecked(item, false, false);
          }
        });
      });
    },
    //取消勾选权限树，给可分配置灰
    cancelDistributableTreeCheckedStatus(cancelSelectTreeIdList) {
      this.distributableTreeDataList.forEach((item) => {
        cancelSelectTreeIdList.forEach((val) => {
          if (val === item.id) {
            item.disabled = true;
            this.$refs.distributableTreeRef.setChecked(item, false, false);
          }
        });
      });
    },
 
    /* -----------------可选分配权限操作--------------------*/
    handleDistributableTree(data, node) {
      console.log("data==>", data);
      console.log("node==>", node);
      let defaultKeys = [...node.checkedKeys, ...node.halfCheckedKeys];
      if (this.isDistributableTreeChecked(data)) {
        if (data.privilegeType === 0) {
          this.cancelCheckedAddDisabledStatus(this.getAllOptIdList(data));
        } else if (data.privilegeType === 1) {
          //如果点击的父ID 和爷爷ID 不在 所有的节点中，则表示全部都取消了
          if (
            !defaultKeys.includes(data.privilegePid) &&
            !defaultKeys.includes(data.privilegePid)
          ) {
            console.log("privilegeType===1-----父亲和爷爷都不存在！！");
            const tempIds = [];
            tempIds.push(data.privilegePid);
            let ids = [
              ...this.getAllOptIdList(data),
              ...tempIds,
              ...[this.findGrandFatherId(data.privilegePid)],
            ];
            this.cancelCheckedAddDisabledStatus(ids);
          }
          if (
            !defaultKeys.includes(data.privilegePid) &&
            defaultKeys.includes(data.privilegePid)
          ) {
            console.log("privilegeType===1-----父亲不存在，但是爷爷存在~~~~");
            const tempIds = [];
            tempIds.push(data.privilegePid);
            let ids = [...this.getAllOptIdList(data), ...tempIds];
            this.cancelCheckedAddDisabledStatus(ids);
          }
          if (
            defaultKeys.includes(data.privilegePid) &&
            defaultKeys.includes(data.privilegePid)
          ) {
            console.log("privilegeType===1-----父亲存在 && 爷爷也存在~~~~~");
          }
          this.cancelCheckedAddDisabledStatus(this.getAllOptIdList(data));
        } else if (data.privilegeType === 2) {
          //如果点击的父ID 和 爷爷ID 都不在 所有的节点中，则表示全部都取消了
          if (
            !defaultKeys.includes(data.privilegePid) &&
            !defaultKeys.includes(this.findGrandFatherId(data.privilegePid))
          ) {
            console.log("privilegeType===2-----父亲和爷爷都不存在！！");
            const tempIds = [];
            tempIds.push(data.privilegePid);
            let ids = [
              ...this.getAllOptIdList(data),
              ...tempIds,
              ...[this.findGrandFatherId(data.privilegePid)],
            ];
            this.cancelCheckedAddDisabledStatus(ids);
          }
          if (
            !defaultKeys.includes(data.privilegePid) &&
            defaultKeys.includes(this.findGrandFatherId(data.privilegePid))
          ) {
            console.log("privilegeType===2-----父亲不存在，但是爷爷存在~~~~");
            const tempIds = [];
            tempIds.push(data.privilegePid);
            let ids = [...this.getAllOptIdList(data), ...tempIds];
            this.cancelCheckedAddDisabledStatus(ids);
          }
          if (
            defaultKeys.includes(data.privilegePid) &&
            defaultKeys.includes(this.findGrandFatherId(data.privilegePid))
          ) {
            console.log("privilegeType===2-----父亲存在 && 爷爷也存在~~~~~");
            this.cancelCheckedAddDisabledStatus(this.getAllOptIdList(data));
          }
        }
      }
    },
    //取消菜单和可分配的勾选状态，并且给可分配加上Disabled状态
    cancelCheckedAddDisabledStatus(cancelSelectTreeIdList) {
      // this.distributableTreeDataList.forEach((item) => {
      //   cancelSelectTreeIdList.forEach((val) => {
      //     if (val === item.id) {
      //       item.disabled = true
      //     }
      //   })
      // })
      // this.menuTreeDataList.forEach((item) => {
      //   cancelSelectTreeIdList.forEach((val) => {
      //     if (val === item.id) {
      //       this.$refs.treeRef.setChecked(item, false, false)
      //     }
      //   })
      // })
    },
    /*---------------------------------------管理员时候对权限树的操作----------------------------------------------------------------*/
    async getOrdinaryManPermissionList() {
      const { userGroupIds } = JSON.parse(getUserToken());
      await this.$store
        .dispatch(
          "groupPermissions/getOrdinaryAdminPermissionsList",
          userGroupIds
        )
        .then(() => {
          this.distributableTreeData = deepClone(
            this.adminPermissionsList
          ).sort((a, b) => {
            return a.id - b.id;
          });
        });
    },
    /*---------------------------------------公用方法-----------------------------------------------------------------------------*/
    //获取操作树节点所有的id
    getAllOptIdList(data) {
      const ids = [];
      ids.push(data.id);
      if (data.menuChildren.length > 0) {
        data.menuChildren.forEach((val) => {
          ids.push(val.id);
          if (val.menuChildren.length > 0) {
            val.menuChildren.forEach((v) => {
              ids.push(v.id);
            });
          }
        });
      }
      return ids;
    },
    //判断菜单权限节点是否被选中
    isTreeMenuChecked(data) {
      let defaultKeys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys(),
      ];
      //当前选中的节点如果不包含在全部选中节点里面，就是取消了选择
      return !defaultKeys.includes(data.id);
    },
    //判断可分配权限是否被选中
    isDistributableTreeChecked(data) {
      let defaultKeys = [
        ...this.$refs.distributableTreeRef.getCheckedKeys(),
        ...this.$refs.distributableTreeRef.getHalfCheckedKeys(),
      ];
      //当前选中的节点如果不包含在全部选中节点里面，就是取消了选择
      return !defaultKeys.includes(data.id);
    },
    //找爷爷节点
    findGrandFatherId(fatherId) {
      let grandFatherId = null;
      this.distributableTreeData.forEach((item) => {
        if (item.menuChildren.length > 0) {
          item.menuChildren.forEach((val) => {
            if (val.id === fatherId) {
              grandFatherId = val.privilegePid;
            }
          });
        }
      });
      return grandFatherId;
    },

编辑

    // 获取superMan权限组数据
    async getSuperManPermissionList(menuKeys, distributableOptionsTreeKeys) {
      const params = new FormData();
      params.append("groupType", this.filters.groupType);
      await this.$store
        .dispatch("groupPermissions/getSuperAdminPermissionsList",params)
        .then(() => {
          this.distributableTreeData = deepClone(
            this.adminPermissionsList
          ).sort((a, b) => {
            return a.id - b.id;
          });
          this.menuTreeData = deepClone(this.adminPermissionsList).sort(
            (a, b) => {
              return a.id - b.id;
            }
          );
          //回显菜单权限
          this.$nextTick(() => {
            menuKeys.forEach((item) => {
              let node = this.$refs.treeRef.getNode(item);
              if (node) {
                if (node.isLeaf) {
                  this.$refs.treeRef.setChecked(node, true);
                }
              }
            });
          });
          //回显可分配权限
          this.$nextTick(() => {
            distributableOptionsTreeKeys.forEach((item) => {
              let node = this.$refs.distributableTreeRef.getNode(item);
              if (node.isLeaf) {
                this.$refs.distributableTreeRef.setChecked(node, true);
              }
            });
          });
          this.setDistributableTreeDisabledStatus(
            this.distributableTreeData,
            this.menuTreeData,
            menuKeys
          );
        });
    },
posted @   云霄紫潭  阅读(1206)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
SQL AI 助手