美文网首页
默认tree第一个树选中,并且按顺序添加,回显(全部的,不能是部

默认tree第一个树选中,并且按顺序添加,回显(全部的,不能是部

作者: 流泪手心_521 | 来源:发表于2021-03-15 09:58 被阅读0次

(1)【阅读权限控制】点击阅读权限按钮,弹窗默认加载第一个群组,但是选中该群组,下方不展示。
(2)【阅读权限控制】选中的群组/机构/省区,再次点击群组/机构/省区的时候是非选中状态。
(3)【阅读权限控制】选中的群组/机构/省区,没有按时间先后顺序排序


image.png

1.思路 右边tree默认第一个,然后在调用tree的时候判断左边的树到底是哪一个,非选中的问题
2.按顺序,只能是数据扩展运算符,... arr=[...arr1,...arr2]
按照 ref="treeOrg",默认选中 :default-checked-keys="treeOrg",把第一个数据塞进treeOrg数据中,在data中设置treeOrg数组中

<el-tree
                ref="treeOrg"
                :data="data"
                :props="defaultPropsGroup"
                highlight-current
                node-key="orgCode"
                default-expand-all
                @node-click="handleNodeClick"
                :default-checked-keys="treeOrg"
              ></el-tree>

默认加载树

//默认加载组织架构tree
    getDeptList() {
      contentMngAddEditApi
        .deptTree()
        .then((res) => {
          if (res.status === 0) {
            this.data = [
              {
                id: 0,
                orgName: "组织架构",
                children: res.data.map((item) => {
                  return item;
                }),
              },
            ];
            this.treeOrg.push(res.data[0].orgCode);//第一个值放到默认的数组中
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          console.log("/announce/dept/auth/tree默认加载组织架构tree", error);
        });
    },

加载树左边的数据

 // 加载树型组织部门信息
    loadNode(node, resolve, data) {
      let params = {};
      if (data && data.id === 0) {
        return;
      }
      if (data === undefined && node.data === undefined) {
        // params={//默认是集团
        //   deptType:1,
        //   orgCode:"FIRST"
        // }
        params = {
          //默认常用群组
          deptType: 2,
          orgCode: "1",
        };
      } else if (data === undefined) {
        params = {
          deptType: node.data.deptType,
          orgCode: node.data.orgCode,
        };
      } else {
        params = {
          //点击传参数
          deptType: data.deptType,
          orgCode: data.orgCode,
        };
      }
      contentMngAddEditApi.organizationsTree(params).then((res) => {
        if (res.status == 0) {
          if (node.level === 0) {
            //必须判断一下,否则Tree树形控件节点一旦展开,就不再重新加载节点数据
            this.node = node;
            this.resolve = resolve;
            this.node.childNodes = []; // 把子节点清空,否则下次加载时会直接往里push子节点导致重复
            if (this.authType == 1) {
              console.log("deptCheckData===", this.deptCheckData);
              this.deptCheckData.map((item1, index1) => {
                this.$nextTick(() => {
                  this.$refs.tree.setChecked(item1.deptCode, true); //并且把选中tree
                });
              });
            }
            if (this.authType == 2) {
              console.log("proCheckData===", this.proCheckData);
              this.proCheckData.map((item1, index1) => {
                this.$nextTick(() => {
                  this.$refs.tree.setChecked(item1.deptCode, true); //并且把选中tree(只能是全部选中的时候记录的选中,但是不能回显下级的,因为树用的懒加载)
                });
              });
            }
            if (this.authType == 3) {
              console.log("groupCheckData===", this.groupCheckData);
              this.groupCheckData.map((item1, index1) => {
                this.$nextTick(() => {
                  this.$refs.tree.setChecked(item1.deptCode, true); //并且把选中tree
                });
              });
            }
          }
          return resolve(res.data);
        } else {
          return this.$message.error(res.message);
        }
      });
    },

右边的tree,点击的时候,判断是左边那个树的节点html以及js
以下是html @check-change="handleCheckChange"

<el-tree
                accordion
                class="org_div"
                @check-change="handleCheckChange"
                @check="handleCheckedDept"
                :render-content="renderContentCont"
                :props="props"
                :load="loadNode"
                :lazy="lazy"
                show-checkbox
                node-key="deptCode"
                ref="tree"
              >
              </el-tree>

右边change的时候,合并数据 有顺序的

    handleCheckChange() {
      if (this.authType == 1) {
        //机构/部门
        this.deptCheckData = this.getOrgList(); //只有父节点
        this.deptCheckData.map((item1, index1) => {
          if (this.searchCheckData.length) {
            this.searchCheckData.map((item2) => {
              if (item1.deptCode == item2.deptCode) {
                this.deptCheckData.splice(index1, 1);
              }
            });
          }
        });
      } else if (this.authType == 2) {
        //管省区
        this.proCheckData = this.getOrgList(); //只有父节点
        this.proCheckData.map((item1, index1) => {
          if (this.searchCheckData.length) {
            this.searchCheckData.map((item2) => {
              if (item1.deptCode == item2.deptCode) {
                this.proCheckData.splice(index1, 1);
              }
            });
          }
        });
      } else if (this.authType == 3) {
        //常用群组
        this.groupCheckData = this.getOrgList(); //只有父节点
        this.groupCheckData.map((item1, index1) => {
          if (this.searchCheckData.length) {
            this.searchCheckData.map((item2) => {
              if (item1.deptCode == item2.deptCode) {
                this.groupCheckData.splice(index1, 1);
              }
            });
          }
        });
      }
      //重点来了,合并数据,扩展运算符
      this.checkedNodes = [...this.groupCheckData, ...this.deptCheckData, ...this.proCheckData]
    },

相关文章

网友评论

      本文标题:默认tree第一个树选中,并且按顺序添加,回显(全部的,不能是部

      本文链接:https://www.haomeiwen.com/subject/wsnhcltx.html