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

创建新的子分支，并提交到码云线上仓库

// 创建新的子分支，起名为 rights
git checkout -b rights

// 第一次提交到线上
git push -u origin rights

权限列表-通过路由展示权限列表组件

1.在 components 目录下，新建 power 文件夹；在 power 文件夹下新建 Rights.vue
2.通过路由，加载权限列表组件。
先在 router -> index.js 的头部区域，导入Rights.vue
Rights需要作为一个子路由规则加载给 home 中进行展示，所以我们需要给 home 路由规则的 children 数组中新建一个子路由

import Rights from '../components/power/Rights.vue'

children: [
        { path: '/welcome', component: Welcome },
        { path: '/users', component: Users },
        { path: '/rights', component: Rights }
      ]

权限列表-绘制面包屑导航和卡片视图

        <!-- 面包屑导航区 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区 -->
        <el-card>
            123
        </el-card>

权限列表-调用API获取权限列表的数据

1.定义一个 data 数据，用来存放权限列表

export default {
  data () {
    return {
      // 权限列表
      rightsList: []
    }
  },
  // 在页面挂载开始之前就要获取数据
  created () {
    // 获取所有权限
    this.getRightsList()
  },
  // 定义getRightsList方法
  methods: {
    async getRightsList () {
      const { data: res } = await this.$http.get('rights/list')
      if (res.meta.status !== 200) {
        return this.$message.error('获取权限列表失败')
      }
      this.rightsList = res.data
    }
  }
}

权限列表-渲染权限列表的UI结构

1.通过 data 动态绑定权限列表数据；通过 prop 指定对应列数据；通过 作用域插槽 的形式，来自定义等级列的显示。

<el-card>
          <el-table :data="rightsList" border stripe>
            <el-table-column type="index"></el-table-column>
            <el-table-column label="权限名称" prop="authName"></el-table-column>
            <el-table-column label="路径" prop="path"></el-table-column>
            <el-table-column label="权限等级" prop="level">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.level === '0'">一级</el-tag>
                <el-tag v-else-if="scope.row.level === '1'" type="success">二级</el-tag>
                <el-tag v-else type="warning">三级</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>