element-ui的使用（七）

今天开始对后台管理系统的权限管理模块进行开发

权限管理主要由两部分构成：角色列表和权限列表

权限列表

权限列表在前面开发的基础上，其实可以说是很简单的了，基本结构还是，顶部的面包屑，下方的内容Card面板，里面包含着Table表格

我们只需要在向后台发送请求，得到数据后，呈现出数据即可

//请求权限列表的数据
 async getRightsList(){
      const {data:res}=await this.$http.get("rights/list")
      if(res.meta.status!=200) this.$message.danger("获取权限列表失败")
      this.rightslist=res.data;
      console.log(this.rightslist)
    }

这里再次说一下Table中的重要属性：data是整个表格的数据源；stripe是一个新了解的属性，它的作用是在表格中显示斑马纹；Table-Column的prop属性是接受数据源对象中具体字段，来作为本列的数据值

  <!-- stripe决定是否显示斑马纹 -->
      <el-table :data="rightslist" stripe style="width: 100%" border >
        <el-table-column type="index" label="#" width="48">
        </el-table-column>
        <el-table-column prop="authName" label="权限名称" >
        </el-table-column>
        <el-table-column prop="path" label="路径"> </el-table-column>
        <el-table-column prop="grade" label="权限等级">
          <!-- tag标签 -->
          <template slot-scope="scope">
            <span v-if="scope.row.level==0">
           <el-tag>一级</el-tag>
           </span>
             <span v-if="scope.row.level==1">
           <el-tag type="success">二级</el-tag>
           </span>
            <span v-if="scope.row.level==2">
           <el-tag type="warning">三级</el-tag>
           </span>
          </template>
           </el-table-column>
      </el-table>

角色列表（重点）---权限分配方面

我们在实际的项目中，需要给每个用户添加不同的角色，一个用户可以有多个角色，胆担任不同的职务

整个角色列表由Breadcrump面包屑、button按钮、Table表格、Card面板、Dialog对话框、MessageBox弹框以及Tree树形控件组成

整个角色列表包含的功能由：添加角色信息，编辑角色信息，删除角色信息、为角色分配权限(重点)

1.首先是请求角色列表数据，并显示在表格中，这个不再赘述

2.添加角色，编辑角色以及删除角色也和前面的步骤相同，不在赘述

3.重点来了，分配权限部分

我们要知道是，每个角色的可分配的角色是不同的，我们可以随时补充和修改。

这里的重点就是Tree树形控件的使用，首先介绍Tree属性的作用：用清晰的层级结构展示信息，可展开或折叠。

Tree属性空间的几个重要属性：

• data：展示数据。数组类型
• node-key：每个树节点用来作为唯一标识的属性，整棵树是唯一的（一般是id）
• default-expand-all：是否默认展开所有节点，默认是false，需要修改成true
• show-checkbox：节点是否可被选择，默认是false,需要修改成true
• default-checked-keys：默认勾选的节点的key的数组，我们需要将选中的节点的id存储在数组中，传给这个属性，它就会帮我们选中对应节点

• props：Tree的核心属性，也是Tree的配置选项，它由几个重要属性

  • label：指定节点标签为节点对象的某个属性,也就是我们data数据源中的想要显示的具体数据名称
  • children：指定子树为节点对象的某个属性值，也就是层级嵌套中，属于子级的属性名称，一般也是children

接下来，说一下Tree树形控件的重要方法

注意：在我们的项目中，当我们的三级节点被全部选中时，属于全选；如果有一个没有选中，那就是半选

全选

半选

• getCheckedKeys()：能够获取到则返回目前被选中的节点的 key 所组成的数组
• getHalfCheckedKeys：能够获取到半选中的节点的 key 所组成的数组

通过这两个方法，就可以获取到所有被选中的节点

实际操作部分

前面我们已经请求到了角色列表的数据，我们可以把数据存储在新定义的allotlist数组中，然后就可以直接动态赋值给tree组件中的data

props是我们tree组件的配置项，我们需要定义一个defaultProps对象来设置配置项，label就是我们allotlist数组中的authName；children就是allotlist数组中的children

show-checkbox:决定了我们tree组件是可选的，也就是有选项框

node-key:就是树节点的唯一标识，用的id

default-expand-all:决定了我们tree所有节点是展开着的

   defaultProps: {
        label: 'authName',
        children: 'children',
      },

default-checked-keys：也就是会默认选中我们设定的节点，只接受数组类型，所以我们要先创建一个数组来存储

在存储节点id的时候用到了递归的方法，我们需要递归角色列表中的所有节点，直到三级节点，收集到所有三级节点的id存储在defKeys

   // 默认选中的节点Id值数组
      defKeys: [],

    // 分配权限
    async allotRights(role) {
      this.roleid = role.id
      const { data: res } = await this.$http.get('rights/tree')
      //  console.log(res)
      if (res.meta.status !== 200)
        this.$message.danger('获取分配权限树状图失败')
      this.allotlist = res.data

      // 获取三级节点的id数组
      this.getLeafKeys(role, this.defKeys)
      this.isAllotShow = true
    },

    // 通过递归的形式获取角色下所有三级权限的id
    getLeafKeys(node, arr) {
      // 如果当前节点不包含children属性,那么可以判断当前是三级节点
      if (!node.children) return arr.push(node.id)

      node.children.forEach((item) => {
        this.getLeafKeys(item, arr)
      })
    },

然后需要用到tree组件的两个方法getCheckedKeys()和getHalfCheckedKeys得到选中的节点的id.使用...扩展运算符，将两个数组合并到key数组中，然后携带之前存储的角色id和整合后的keys数组，就可以把更新后的权限传给服务器。

    // 更新用户的权限
    async updateRights() {
      const key = [
        ...this.$refs.trees.getCheckedKeys(),
        ...this.$refs.trees.getHalfCheckedKeys(),
      ]
      // console.log(keys)
      const keys = key.join(',')

      const { data: res } = await this.$http.post(
        `roles/${this.roleid}/rights`,
        { rids: keys }
      )
      // console.log(res)
      if (res.meta.status !== 200) this.$message.danger('更新权限失败')

      this.getRolesList()
      this.isAllotShow = false
      this.$message.success('更新权限成功')
    },

      <el-tree
        :data="allotlist"
        :props="defaultProps"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="defKeys"
        ref="trees"
      ></el-tree>

还有一个细节就是，我们希望在Table表格中每一行都有一个可展开的按钮，显示用户所属权限的层级关系,

我们为Table-column设置type="expand"，显示为一个可展开的按钮，
然后再其内部设置slot插槽，显示层级关系

      <!-- 如果设置了 type=expand 则显示为一个可展开的按钮     -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row
              :gutter="10"
              v-for="(item1, index) in scope.row.children"
              :key="item1.id"
              :class="[
                'bordeBottom',
                index === 0 ? 'borderTop' : '',
                'vcenter',
              ]"
              style="margin-left: 25px"
            >
              <!-- 渲染一级权限 -->
              <el-col :span="5">
                <el-tag> {{ item1.authName }}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>

              <!-- 渲染二级和三级权限 -->
              <el-col :span="19">
                <el-row
                  v-for="(item2, index) in item1.children"
                  :key="item2.id"
                  :class="[index == 0 ? '' : 'borderTop', 'vcenter']"
                >
                  <el-col :span="6">
                    <el-tag type="success">{{ item2.authName }}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="18">
                    <el-tag
                      type="warning"
                      v-for="(item3, index) in item2.children"
                      :key="item3.id"
                      closable
                      @close="removeRightsById(scope.row, item3.id)"
                      >{{ item3.authName }}</el-tag
                    >
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>