element ui Tree 树形控件如何做权限列表

先上效果图：
权限列表基于模块的区分，所以使用element ui 的树形控件非常方便，首先需求是选中编辑权限之后查询权限默认选中，选中查询权限不需要选中编辑权限，取消查询权限按钮编辑权限自动取消，选中子级之后父级默认选中，父级取消之后子级取消（附数据格式）。

<template>
	<div class="mytree">
   		<el-tree
	       :data="moduleData"
	       :indent="0"
	       node-key="id"
	       default-expand-all
	       ref="rightTree"
	       :filter-node-method="filterNode"
	       :expand-on-click-node="false"
	     >
       <span class="custom-tree-node" slot-scope="{ node,data }">
         <span>{{ node.label }}</span>
         <div class="check">
           <span class="queryCheck">
             <span v-if="data.id==29">查询权限</span>
             <el-checkbox
               v-if="data.id!=29"
               v-model="data.selectStatus"
               @change="selectStatusChange(node,data)"
             ></el-checkbox>
           </span>
           <span class="editCheck">
             <span v-if="data.id==29">编辑权限</span>
             <span v-if="data.id!=29">
               <el-checkbox
                 v-if="data.editStatus!=null"
                 @change="editChange(node,data)"
                 v-model="data.editStatus"
               ></el-checkbox>
               <el-checkbox v-if="data.editStatus===null" disabled></el-checkbox>
             </span>
           </span>
         </div>
       </span>
     </el-tree>
   </div>
</template>
<script>
export default {
  name: "RightsManagement",
  data() {
    return {
      moduleData: [
        {
          id: 29,
          label: "所有模块",
          selectStatus: true,
          editStatus: true,
          children: [
            {
              id: 2,
              label: "a",
              selectStatus: false,
              editStatus: null,
              children: [
                {
                  id: 11,
                  label: "a1",
                  selectStatus: false,
                  editStatus: null,
                  children: [
                    {
                      id: 24,
                      label: "a1-1",
                      selectStatus: false,
                      editStatus: null
                    },
                    {
                      id: 25,
                      label: "a1-2",
                      selectStatus: false,
                      editStatus: null
                    }
                  ]
                }
              ]
            },
            {
              id: 4,
              label: "b",
              authName: "riskList",
              selectStatus: false,
              editStatus: false,
              children: [
                {
                  id: 31,
                  label: "b1",
                  selectStatus: false,
                  editStatus: false,
                  children: [
                    {
                      id: 32,
                      label: "b1-1",
                      selectStatus: false,
                      editStatus: false,
                      children: [
                        {
                          id: 33,
                          label: "b1-1-1",
                          selectStatus: false,
                          editStatus: false
                        },
                        {
                          id: 34,
                          label: "b1-1-2",
                          selectStatus: false,
                          editStatus: false
                        }
                      ]
                    },
                    {
                      id: 49,
                      label: "b1-2",
                      selectStatus: false,
                      editStatus: false,
                      children: [
                        {
                          id: 50,
                          label: "b1-2-1",
                          selectStatus: false,
                          editStatus: false
                        },
                        {
                          id: 51,
                          label: "b1-2-2",
                          parentId: 49,
                          selectStatus: false,
                          editStatus: false
                        }
                      ]
                    }
                  ]
                },
                {
                  id: 36,
                  label: "b2",
                  parentId: 4,
                  selectStatus: false,
                  editStatus: false,
                  children: [
                    {
                      id: 54,
                      label: "b2-1",
                      selectStatus: false,
                      editStatus: false,
                      children: [
                        {
                          id: 55,
                          label: "b2-1-1",
                          selectStatus: false,
                          editStatus: false
                        },
                        {
                          id: 58,
                          label: "b2-1-2",
                          selectStatus: false,
                          editStatus: false
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              id: 6,
              label: "c",
              selectStatus: false,
              editStatus: false,
              children: [
                {
                  id: 15,
                  label: "c1",
                  selectStatus: false,
                  editStatus: false
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    // 过滤节点展示
    filterNode(value, data, node) {
      if (!value) {
        return true;
      }
      let level = node.level;
      let _array = []; //这里使用数组存储 只是为了存储值。
      this.getReturnNode(node, _array, value);
      let result = false;
      _array.forEach(item => {
        result = result || item;
      });
      return result;
    },
    // 查询权限change事件
    selectStatusChange(node, data) {
      let flag = data.selectStatus;
      this.Modify = true;
      let arr = [];
      arr.push(node);
      if (flag) {
        this.selected(arr);
      } else {
        this.uncheck(data);
        if (typeof data.editStatus == "boolean") {
          data.editStatus = data.selectStatus;
          this.editUncheck(data);
        }
      }
    },
    // 查询权限选中
    selected(list) {
      list.forEach(row => {
        if (row.parent) {
          row.parent.data.selectStatus = true;
          let newArr = [];
          newArr.push(row.parent);
          this.selected(newArr);
        }
      });
    },
    // 查询权限取消选中
    uncheck(obj) {
      obj.children.forEach(row => {
        if (row.children) {
          row.selectStatus = false;
          this.uncheck(row);
        }
      });
    },
    // 编辑权限change事件
    editChange(node, data) {
      this.Modify = true;
      let flag = data.editStatus;
      let arr = [];
      arr.push(node);
      if (flag) {
        this.editSelected(arr);
        data.selectStatus = data.editStatus;
        this.selected(arr);
      } else {
        this.editUncheck(data);
      }
    },
    // 编辑权限选中
    editSelected(list) {
      list.forEach(row => {
        if (row.parent) {
          row.parent.data.editStatus = true;
          let editArr = [];
          editArr.push(row.parent);
          this.editSelected(editArr);
        }
      });
    },
    // 编辑权限取消选中
    editUncheck(obj) {
      obj.children.forEach(row => {
        if (row.children) {
          row.editStatus = false;
          this.editUncheck(row);
        }
      });
    }
  }
};
</script>

另外，附赠树形控件的连线的css样式（css在网上参考的文章，具体忘记是哪位大佬了）

// 折线图样式
.mytree /deep/ {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }
  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }
}