20-Vue实战项目：电商管理系统（Element-UI）-角色列表

角色列表-通过路由展示角色列表组件

1.在 power 文件夹下，新建 Roles.vue
2.在 index.js 中进行导入

// 全局导入
import Roles from '../components/power/Roles.vue'

{
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        { path: '/welcome', component: Welcome },
        { path: '/users', component: Users },
        { path: '/rights', component: Rights },
        // 作为 home 页面的子路由
        { path: '/roles', component: Roles }
      ]
    }

角色列表-绘制基本布局结构并获取列表数据

1.卡片视图布局

<!-- 卡片视图 -->
    <el-card>
      <!-- 添加角色按钮区域 -->
      <el-row>
        <el-col>
            <el-button type="primary">添加角色</el-button>
        </el-col>
      </el-row>
    </el-card>

2.通过调用API获取数据

  data () {
    return {
      // 所有角色列表数据
      roleList: []
    }
  },
  // 生命周期函数
  created () {
    this.getRolesList()
  },
  methods: {
    // 获取所有角色的列表
    async getRolesList () {
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败')
      }

      this.roleList = res.data
      console.log(this.roleList)
    }
  }

角色列表-分析角色下权限渲染的实现思路

1.作用域插槽：需要通过 children 属性拿到角色对应的权限
显示三级权限结构，通过三层 for 循环嵌套

<!-- 展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">{{scope.row}}</template>
        </el-table-column>

2.通过 for 循环，循环了 scope.row 的 children 属性，children 属性里面包含的是所有的一级属性。
循环一次往第一列增加一个 tag 标签

<!-- 展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row v-for="(item1, i1) in scope.row.children" :key="item1.id">
              <!-- 渲染一级权限 -->
              <el-col :span="5">
                <el-tag>
                  {{item1.authName}}
                </el-tag>
              </el-col>
              <!-- 渲染二级和三级权限 -->
              <el-col :span="19"></el-col>
            </el-row>
            <pre>
              {{scope.row}}
            </pre>
          </template>
        </el-table-column>

角色列表-通过二层for循环渲染二级权限

<!-- 渲染二级和三级权限 -->
<el-col :span="19">
<!-- 通过 for 循环嵌套渲染二级权限 -->
  <el-row :class="[i2 === 0 ? '' : 'bdtop']" v-for="(item2, i2) in item1.children" :key="item2.id">
  <el-col>
    <el-tag type="success">{{item2.authName}}</el-tag>
    <i class="el-icon-caret-right"></i>
  </el-col>

角色列表-美化角色下权限的UI结构

1.在全局样式表中加入最小宽度设置

html,body,#app {
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 1366px;
}

2.每一列居中对齐：
style中添加：

.vcenter {
  display: flex;
  align-items: center;
}

在el-row中绑定样式

<el-row :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']" v-for="(item2, i2) in item1.children" :key="item2.id">

角色列表-点击删除按钮弹出确认提示框

1.首先，给三级权限的 Tag 标签绑定 close 事件。

<el-tag type="warning" v-for="(item3, i3) in item2.children" :key="item3.id" closable @close="removeRightById()">{{item3.authName}}</el-tag>

2.close 事件处理函数 removeRightById
用到 MessageBox 消息提示框，调用$confirm方法即可打开消息提示，它模拟了系统的 confirm。

    // 根据Id删除对应法的权限
    async removeRightById () {
      // 弹框提示用户是否要删除
      const confirmResult = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      console.log('确认删除')
    }

角色列表-完成删除角色下指定权限的功能

1.通过 scope.row 和 item3.id 获取到对应角色的 Id 和权限 Id

<el-tag type="warning" v-for="(item3, i3) in item2.children" :key="item3.id" closable @close="removeRightById(scope.row,item3.id)">{{item3.authName}}</el-tag>

2.未取消删除，则发起真正的 http 请求

 async removeRightById (role, rightId) {
      // 弹框提示用户是否要删除
      const confirmResult = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      // 未取消删除，则发起真正的 http 请求，进行删除，``“反引号”表示字符串
      const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)
      if (res.meta.status !== 200) {
        return this.$message.error('删除权限失败！')
      }
      // 删除成功，重新刷新角色权限列表
      // 一点删除，会自动关闭，原因是重新获取了整个数据列表
      // 所以不建议直接使用 this.getRolesList()
      // 可以为角色重新赋值权限
      role.children = res.data
    }