1. 创建组件Rights.vue
导入路由，rights是home下面的子页面，所以导入home的子路由规则；
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
{ path: '/welcome', component: Welcome },
{ path: '/users', component: User },
{ path: '/rights', component: Rights }
]
}
2. 然后是页面的布局
首先导入面包屑导航组件<el-card class="box-card"> 响应的数据类型根据API文档可以知道是list类型；所以在行为区写上：对应的list数据，然后在created()里面渲染页面，根据生命周期钩子来的，因为在beforeCreate还不能拿到后台响应的数据，在created的时候已经拿到了，所以在created钩子渲染页面
data(){
return {
rightsList:[]
}
},
created () {
this.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
}
}
3.使用element ui的带边框的表格展示从后台获取到的数据
通过 <el-table-column type="index" label="序号"></el-table-column>给表格每行添加序号1 2 3... type="index"，然后又使用element ui的Tag标签美化权限等级：在权限等级那一列因为要自定义形式所以通过插槽的形式去做
<el-table-column
prop="level"
label="权限等级">
<template v-slot:default="slotProps">
<el-tag v-if="slotProps.row.level==='0'">一级标签</el-tag>
<el-tag type="success" v-if="slotProps.row.level==='1'">二级标签</el-tag>
<el-tag type="warning" v-if="slotProps.row.level==='2'">三级标签</el-tag>
</template>
</el-table-column>
4. 创建用户角色列表展示页Roles.vue
跟之前的步骤完全类似，重复功能按照之前的步骤去做就好了，这里重点在一级，二级，三级展开，使用三层for循坏搭配栅格系统el-row el-col，在删除的时候，删除之后只要把role.children更新就可以了，role.children=res.data
5. 树型组件的使用Tree树形控件
<el-tree :data="data" :props="defaultProps"
@node-click="handleNodeClick"></el-tree>
<el-tree
:data="rightsList"
:props="treeProps"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="defKeys"
></el-tree>
//在data里面写
rightsList: [],
treeProps: {
label: 'authName',
children: 'children'
}
里面的rightsList表示数据，treeProps表示按哪个属性分下级，show-checkbox表示复选框，default-expand-all表示默认展开所有，default-checked-keys表示选中默认已有的权限，defKeys是数组，里面存放三级权限的id，使用递归获得这个三级权限id，关闭对话框的时候需要清空defKeys数组
@click="showSetRightDialog(slotProps.row)"
async showSetRightDialog (role) {
...
this.getLeafKeys(role, this.defKeys)
},
getLeafKeys (node, arr) {
// 如果node节点不包含children属性则是三级节点
if (!node.children) {
return arr.push(node.id)
}
node.children.forEach((item) => {
return this.getLeafKeys(item, arr)
})
}
把复选框选中的角色权限添加到角色身上 利用element ui树形组件的方法 ：getCheckedKeys getHalfCheckedKeys后者可以获取到半选中节点
