element-ui之树形控件的使用

代码虐我千百遍，我对代码如初恋，前前前前端静静又来更新博客了，本以为element-ui会让我写代码的速度快如闪电，一不留心，掉坑里了，花费我好长的时间才从深坑里面爬出来

首先，看一下效果图


这个是我写的一个后台电商管理系统，这一部分是不同的角色与不同的权限，比如说，主管权限就可能会相对比较多，这都是通过请求接口点击我可以查看更详细的信息 ʜᴀᴘᴘʏ ᴅᴀʏs🐳🐳

这里我介绍一下我使用的一些属性
default-expanded-keys —默认展开节点
default-checked-keys—默认选中的节点
node-key—值为节点数据中的一个字段名，该字段在整棵树中是唯一的
data----展示数据
show-checkbox -----节点是否可被选择
props------- 配置选项
label-----指定节点标签为节点对象的某个属性值
children--------指定子树为节点对象的某个属性值

方法:
getHalfCheckedNodes—若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点所组成的数组
getHalfCheckedKeys----若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组

html 部分数据：

<el-table :data="roleList" style="width: 100%" border>
  <el-table-column type="expand">
    <template slot-scope="props">
      <div v-if="props.row.children.length !== 0">
        <el-row
          :class="ind == 0 ? 'bottomTop' : ''"
          v-for="(item, ind) in props.row.children"
           :key="item.id">
        <el-col :span="6">
         <el-tag closable @close="delRight(props.row, item.id)">
         {{ item.authName}}</el-tag><i class="el-icon-caret-right"></i>
         </el-col>
        <el-col :span="18">
      <el-row v-for="item2 in item.children" :key="item2.id">
        <el-col :span="6">
         <el-tag  type="success"   closable
          @close="delRight(props.row, item2.id)">
          {{ item2.authName }}</el-tag>
           <i class="el-icon-caret-right"></i>
          </el-col>
           <el-col :span="18">
            <el-tag v-for="item3 in item2.children" :key="item3.id"
              type="warning"
              closable @close="delRight(props.row, item3.id)">
              {{ item3.authName }}
              </el-tag> 
              </el-col>
          </el-row>
         </el-col>
         </el-row>
       </div>
            <div v-else>该角色暂无权限</div>
    </template>
    </el-table-column>
 <el-table-column label="角色名称" prop="roleName"> </el-table-column>
  <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
   <el-table-column label="操作">
   <template slot-scope="scope">
  <el-button
  type="warning"
  size="mini"
 icon="el-icon-s-tools"
 @click="roleRights(scope.row)"
>分配权限</el-button >
  </template>
 </el-table-column>
 </el-table>

这里遇到的问题是：无法渲染权限
这里传值传递了两个：

   // 删除角色指定权限
    delRight(role, rightId) {
      // console.log(role);
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delRoleRight(role.id, rightId).then((res) => {
            // console.log(res);
            if (res.data.meta.status == 200) {
              this.$message.success(res.data.meta.msg);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //获取删除后角色的全部权限
              role.children = res.data.data;
            } else if (res.data.meta.status == 400) {
              this.$message.warning(res.data.meta.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //分配权限
    roleRights(role) {
      this.showRole = true;
      this.currentID = role.id;
      this.getCheckedRightsIds(role, this.checkedKeysArr);
      this.getAllRight();
    },
    //递归获取最后一级权限所有id组成一个数组，
    getCheckedRightsIds(node, arr) {
      //当前node没有children,意味着node没有子级，则将当前node的id保存到数组中
      if (!node.children) {
        return arr.push(node.id);
      }
      //如果node含有children，则用递用调用getCheckedRightsIds函数
      node.children.forEach((subnode) => this.getCheckedRightsIds(subnode, arr));
    },
    //清空上次所选
    resetTree() {
      this.checkedKeysArr = [];
    },
    //角色授权
    changeRight() {
      //全选
      let nodeArr = [
        //全选中
        ...this.$refs.treeRef.getCheckedKeys(),
        //半选中
        ...this.$refs.treeRef.getHalfCheckedKeys(),
      ];
      console.log(this.$refs.treeRef.getCheckedKeys());
      let nodeStr = nodeArr.join(",");
      roleRight(this.currentID, nodeStr).then((res) => {
        if (res.data.meta.status == 200) {
          this.$message.success(res.data.meta.msg);
          this.showRole = false;
          this.getRole();
        }
      });
    },

就是递归，得到自己想要的值
归根结底，还是递归