通过递归的形式,获取角色下所有三级权限id,并保存到数组中(后台数据为树形)
1.通过@click="showSetRightDialog(scope.row)拿到数据对象
<!-- slot-scope="scope" -->
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
<el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)">分配权限</el-button>
</template>
2.私有数据 重点:默认选中节点id值数组 defKeys: [],
data() {
return {
//所有角色列表数据
rolelist: [],
//控制分配权限的对话框显示与隐藏
setRightDialogVisible: false,
//所有权限的数据
rightlist: [],
// 树形控件 指定数据源中绑定的字段
treeProps: {
children: 'children',
label: 'authName'
},
//默认选中节点id值数组
defKeys: [],
//当前即将分配权限的角色id
roleId:'',
}
},
3.通过递归的形式,获取角色下所有三级权限id,并保存到defKeys数组。这个if判断就是停止要求 ,他的要求就是,如果该节点没有children属性,证明了这是一个三级节点,然后arr.push(node.id),把这个id保存到数组中。
这里的node,arr,都是形参。
// 通过递归的形式,获取角色下所有三级权限id,并保存到defKeys数组中
getLeafKeys(node, arr) {
//如果当前node没节点不包含children属性,则是三级节点
if (!node.children) {
return arr.push(node.id)
}
// console.log(node);
node.children.forEach(item =>
this.getLeafKeys(item,arr)
)
- async showSetRightDialog(role)该函数进行数据渲染,调用递归函数this.getLeafKeys(role, this.defKeys) ,然后进行数据展示
// 展示分配权限的对话框
async showSetRightDialog(role) {
this.roleId=role.id
//获取所有权限数据
const {data:res}=await this.$http.get('rights/tree')
if (res.meta.status !== 200) {
return this.$message.error("权限数据获取失败")
}
this.rightlist = res.data
//console.log(this.rightlist);
//递归回去三级节点的id
this.getLeafKeys(role, this.defKeys)
//console.log(this.defKeys);
this.setRightDialogVisible = true
},