el-tree 菜单权限 横向区分展示

html:

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="菜单权限" name="first" style="padding:5px 0px" class="treeTab">
          <div class="line"></div>
          <div class="treeTitle">
            <div class="leftTitle">菜单</div>
            <div class="titleLine"></div>
            <div class="rightTitle">
              操作</div>
          </div>
          <el-tree
            :data="tableData"
            show-checkbox
            node-key="id"
            ref="tree"
            default-expand-all
            :props="defaultProps"  :check-strictly="true"
            @check="handleCheckChange"
          >
          <span class="line"></span>
            <span
              v-if="data.is_menu == 1"
              class="leftTree"
              slot-scope="{ data }"
            >
              <span>{{ data.name }}</span>
              
            </span>
            
            <span v-else class="rightTree" slot-scope="{ data }">
              <span>{{ data.name }}</span>
            </span>
            
          </el-tree>
        </el-tab-pane>
        <el-tab-pane label="数据权限" name="second">
          <el-radio-group v-model="addForm.data_range">
            <div class="each"><el-radio :label="1">当前业务</el-radio></div>
            <div class="each"><el-radio :label="2">个人</el-radio></div>
            <div class="each"><el-radio :label="3">所属部门</el-radio></div>
            <div class="each">
              <el-radio :label="4">所属部门及下级部门</el-radio>
            </div>
          </el-radio-group>
        </el-tab-pane>
      </el-tabs>

注：主要靠is_menu来区分是页面还是按钮

js：

获取列表时触发核心处理代码changeTreeClass()

async getMenuList() {
      //获取菜单列表
      let a = await getMenu({})
        .then((res) => {
          this.loading = false;
          if (res.code == 1) {
            this.tableData = res.data;
            this.treeData = res.data;

            // this.traverseTree(this.tableData);

            console.log(this.tableData, "菜单列表");
            setTimeout(() => {
              this.changeTreeClass();
            }, 0);
          } else {
            this.$notify({
              title: res.msg,
              type: "warning",
              duration: 2000,
            });
          }
        })
        .catch((err) => {});
    },

handleCheckChange(num, val) {
      console.log(num, "选中");
      //处理父子关联（选中子必须选中父，选中父不会选中子）
      const node = this.$refs.tree.getNode(num.id);
      this.setNode(node);
      this.allChose = val.checkedKeys.concat(val.halfCheckedKeys);
      console.log(this.allChose, "拼接后的");
    },
    setNode(node) {
      console.log(node, "node");
      if (node.checked) {
        //如果当前是选中checkbox,则递归设置父节点和父父节点++选中 且设置子节点选中
        this.setParentNode(node);
       this.setChildrenNodeTrue(node);

      } else {
        //当前是取消选中,将所有子节点都取消选中
        this.setChildrenNode(node);
      }
    },
    setParentNode(node) {
      if (node.parent) {
        for (const key in node) {
          if (key === "parent") {
            node[key].checked = true;
            this.setParentNode(node[key]);
          }
        }
      }
    },
    setChildrenNode(node) {
      let len = node.childNodes.length;
      for (let i = 0; i < len; i++) {
        node.childNodes[i].checked = false;
        this.setChildrenNode(node.childNodes[i]);
      }
    },
setChildrenNodeTrue(node) {
      let len = node.childNodes.length;
      for (let i = 0; i < len; i++) {
        node.childNodes[i].checked = true;
        this.setChildrenNodeTrue(node.childNodes[i]);
      }
    },

    // 设置按钮节点水平排列
    // 在获取列表时触发 
    changeTreeClass() {
      var classDomList = document.getElementsByClassName("rightTree");
      // console.log(classDomList, "classDomList");
      for (let i = 0; i < classDomList.length; i++) {
        // 给自定义class节点的父节点设置样式
        classDomList[i].parentNode.style.float = "left";

        classDomList[i].parentNode.style.paddingLeft = 0;
        classDomList[i].parentNode.parentNode.style.paddingLeft = "35%";
        classDomList[i].parentNode.parentNode.parentNode.style.marginTop = "-26px";

      }
      var leftTree = document.getElementsByClassName("leftTree");
      for (let g = 0; g < leftTree.length; g++) {
      // console.log(leftTree[g].parentNode,'asdas')
        leftTree[0].parentNode.parentNode.parentNode.style.borderTop = "1px solid #e6e6e6";
        leftTree[g].parentNode.style.border = "1px solid #e6e6e6";
        leftTree[g].parentNode.style.borderTop = "0";
        leftTree[g].parentNode.style.zIndex = "99999";
        leftTree[g].parentNode.style.height = "35px";
      }
      var wtf = document.getElementsByClassName("el-tree-node__children");
      for (let f = 0; f < leftTree.length; f++) {
        // wtf[f].style.marginTop = "-26px";
      }
      
    },

编辑按钮获取默认选中效果：

change(row) {
      getMenu({})
        .then((res) => {
          this.loading = false;
          if (res.code == 1) {
            this.tableData = res.data;
            this.treeData = res.data;

            // this.traverseTree(this.tableData);

            console.log(this.tableData, "菜单列表");
            setTimeout(() => {
              this.changeTreeClass();
            }, 0);
            this.groupDialogVisible = true;
            this.isChange = true;
            this.title = "修改事业群";
            console.log(this.$refs["tree"], 'this.$refs["tree"]');
            roleDetail({ role_id: row.id }).then((res) => {
              console.log(res, "详情数据");

              this.addForm.name = res.data.name;
              this.addForm.data_range = res.data.data_range;
              this.addForm.role_id = row.id;
              let arr = res.data.rule.split(",");
              this.allChose = arr;
              console.log(arr, "arrrrr");

              // let arr = res.data.rule;
              this.$nextTick(() => {
                arr.forEach((i) => {
                  //根据id获取对应的数据

                  var node = this.$refs["tree"].getNode(i);
                  // console.log(i, "iiiiiii");
                  // console.log(node, "nodeeeeeeeeeeeeee");
                  //指定节点是否为叶子节点
                  // if (node.isLeaf) {
                    this.$refs["tree"].setChecked(node, true);
                  // }
                });
              });
              console.log(this.permChose, "this.permChose");
            });
          } else {
            this.$notify({
              title: res.msg,
              type: "warning",
              duration: 2000,
            });
          }
        })
        .catch((err) => {});
    },