大家好，又见面了，我是你们的朋友全栈君。
电商后台管理系统——权限管理模块
电商后台管理系统的权限管理模块分为角色列表和权限列表两部分，两部分流程图大概如下
1.权限列表实现过程
创建路由组件配置路由——布局基本面包屑导航卡片视图——表单绑定数据提供方法获取权限列表数据 表单有三列数据：权限名称， 路径 ，权限等级，权限等级通过作用域与 插槽放入el-tag实现自定义格式，再根据数据的level判断显示哪个等级的tag 表单结构：
代码语言：javascript复制<el-card>
<el-table :data="rightList" 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 type="success" v-else-if="scope.row.level==='1'">二级</el-tag>
<el-tag type="warning" v-else>三级</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>方法：通过发送get请求获取数据
代码语言：javascript复制methods:{
//获取权限列表
async getRightList(){
const {
data:res}=await this.$http.get('rights/list')
if(res.meta.status!==200){
return this.$message.error('获取权限列表失败')
}
this.rightList=res.data
}
}2.角色列表实现过程
整个页面功能有添加角色功能，以及一个表单，表单有三列数据：角色名称，角色描述，操作 。操作通过作用域插槽实现布局编辑，删除，分配权限按钮。 实现流程：添加角色列表组件配置路由——布局基本面包屑导航卡片视图表单等——表单绑定数据提供方法获取权限列表数据——操作功能模块实现 困难点：
1.表单的展开列实现还需要通过三重嵌套for循环生成下拉列表 通过在作用域与插槽里使用栅格布局el-row（行）,el-col（列），分为24列 通过scope.row.children拿到一级权限数据，将key值设置为拿到的数据item的id
代码语言：javascript复制<el-tag closable @close="removeRightById(scope.row, item1.id)">{
{
item1.authName}}</el-tag>通过 for 循环 嵌套渲染二级权限
代码语言：javascript复制`<el-row :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']" v-for="(item2, i2) in item1.children" :key="item2.id">`i2是索引 通过for继续渲染三级权限
代码语言：javascript复制 <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.分配权限的操作
分配权限按钮对话框（树形结构弹窗）——分配权限按钮绑定点击事件——渲染所有权限数据一级默认选中数据到页面树形结构——分配权限对话框确定按钮绑定分配权限事件
代码语言：javascript复制<el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="treeRef"></el-tree>所有权限数据获取与前面数据获取写法一致。默认数据选中需要通过 el-tree的属性: default-checked-keys=“defKeys” defkeys 。 思路是点击分配权限按钮时将当前角色所有的三级权限id存入defkeys，当前角色的id通过在点击分配权限按钮事件里传入scope.row
代码语言：javascript复制getLeafKeys(node, arr) {
// 如果当前 node 节点不包含 children 属性，则是三级节点
if (!node.children) {
return arr.push(node.id)
}
node.children.forEach(item => this.getLeafKeys(item, arr))
},上面代码块是通过递归的形式，获取角色下所有三级权限的id，并保存到 defKeys 数组中（判断是否包含child属性，包含则不是三级节点，则让该节点的子节点循环遍历递归调用该函数） 注意需要监听关闭对话框事件，因为需要重置defkeys数组，不清空的话，每次之前的角色都保存在数组里了。 确定按钮绑定事件： el-tree的getCheckedKeys(),getHalfCheckedKeys()可以获得全选和半选中的数组，将数据post传入后台，再重新调用获取角色方法。
代码语言：javascript复制async allotRights() {
const keys = [
...this.$refs.treeRef.getCheckedKeys(),
...this.$refs.treeRef.getHalfCheckedKeys()
]
const idStr = keys.join(',')
const {
data: res } = await this.$http.post(
`roles/${
this.roleId}/rights`,
{
rids: idStr }
)
if (res.meta.status !== 200) {
return this.$message.error('分配权限失败！')
}
this.$message.success('分配权限成功！')
this.getRolesList()
this.setRightDialogVisible = false
}发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145903.html原文链接：https://javaforall.cn
