按照业务需求，要做一个权限菜单，方便设置人员的权限，在网上没有找到想要的效果，自己琢磨了一下，如下为效果图：

菜单权限.png

1、从接口获取所有权限的数据，如果获取的数据不是树形结构，先处理为树形结构
（1）vue代码如下：

<div class="table">
       <el-scrollbar style="height: 80%; background-color: #fff">
              <el-tree
                  show-checkbox
                  :check-on-click-node="true"
                  :data="allMenu"
                  default-expand-all
                  node-key="id"
                  :expand-on-click-node="false"
                  :props="menuProps"
                  ref="menuTree"
                  :check-strictly="true">
                </el-tree>
        </el-scrollbar>
 </div> 

（2）js代码如下：

data() {
    return {
      allMenu: [], // 全部菜单
      menuProps: {
        label: "menuname",
        children: "children",
      },
    }
  },

toTree() 为自己封装的方法（数组转成树形结构数据），在我上一篇笔记有整理过

created(){
   this.getAllMenu()
},
methods: {
    // 获取所有权限菜单
    getAllMenu(){
      menuList({}).then(res => {
        if(res.code === 0) {
          this.allMenu = toTree(res.data);
          console.log(this.allMenu)
        }else {
          this.$message.error(res.message)
        }
      })
    },
}

目前效果如图：

树形控件效果图.png

2、自定义树形控件节点内容（详细的使用方法可参考element官网），官网有两种方法自定义render-content和scoped slot都可以达到效果，我这里使用的是第二种作用域插槽。
（1）为第三级的节点加上‘especially’类名，vue代码如下：

<el-tree
     show-checkbox
     :check-on-click-node="true"
     :data="allMenu"
     default-expand-all
     node-key="id"
     :expand-on-click-node="false"
     :props="menuProps"
     ref="menuTree"
     :check-strictly="true">

     <!-- 自定义节点内容 -->
     <span class="custom-tree-node" slot-scope="{ node, data }" >
            <span :class="(node.level == 3)? 'especially':''">{{ node.label }}</span>
     </span>

</el-tree>

（2）dom操作修改节点样式，js代码如下：

watch: {
    // 监听权限菜单tree是否渲染完
    allMenu: function () {
      this.$nextTick(() => {
        this.changeTreeClass()
      })
    },
  },
methods: {
// 改变tree节点样式
    changeTreeClass() {
      // 找到之前做标记的class
      var classDomList = document.getElementsByClassName('especially')
      // 改变这几个样式
      for (var i = 0; i < classDomList.length; i++) {
        classDomList[i].parentNode.parentNode.style.cssText = 'width: auto;border: none;'
        classDomList[i].parentNode.parentNode.parentNode.style.cssText = 'border: none;'
        classDomList[i].parentNode.parentNode.nextSibling.style.cssText = 'display: none;'
      }
    },
}

（3）less代码如下：

<style lang="less" scoped>
 .table {
      overflow: auto;
      height: 100%;
      /deep/.el-tree {
    .el-tree-node__content {
      border-bottom: 1px #000000 solid;
      padding: 5px 10px !important;
      width: 140px;
      height: auto;
      .el-tree-node__expand-icon.el-icon-caret-right{
        display: none;
      }
    }
    .el-tree-node {
      padding: 0 !important;
      display: flex;
    }
    .el-checkbox.is-disabled.is-checked {
      .el-checkbox__inner{
        background-color: #363554 !important;
        border-color: #363554 !important;
      }
    }
    .el-tree-node__children {
      display: flex;
      flex-direction: column;
      
      .el-tree-node{
        display: flex;
        padding: 0px !important;
        border-bottom: 1px #000000 solid;
        .el-tree-node__content{
          width: 200px;
          border-left: 1px #000000 solid;
          border-right: 1px #000000 solid;
          border-bottom: none;
          .custom-tree-node {
            height: 24px;
            display: flex;
            align-items: center;
            .tree-btn {
              margin-left: 10px;
              display: none;
            }
            .el-button{
              padding: 0px !important;
              border-radius: 4px;
              background: #363554;
              color: #ffffff;
            }
          }
        }
        .el-tree-node__children{
          width: 580px;
          flex-direction: row;  
          flex-wrap: wrap;
        }
      }
      .el-tree-node.is-checked{
        .tree-btn {
          display: block !important;
        }
      }
    }
  }
}
</style>

完成效果图.png