创建新的子分支,并提交到码云线上仓库
// 创建新的子分支,起名为 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>