摘要：
文档地址 ==200){returnthis.$message.error('获取权限数据失败！node.children){returnarr.push}node.children.forEach},}第次关闭时，清空已选中的数组，不然会叠加到下次打开的显示//权限对话框关闭事件setRightDialogClosed(){this.rightsList=[]},获取选中的节点id以逗号分隔发送给后台方法里getCheckedKeys则返回目前被选中的节点的keygetHalfCheckedNodes则返回目前半选中的节点的key点击确定时调用下面的函数确定//分配权限asyncallotRights{//获得当前选中和半选中的Idconstkeys=[...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys()]//join()方法用于把数组中的所有元素放入一个字符串constidStr=keys.join(',')const{data:res}=awaitthis.$http.postif(res.meta.status!
https://element.eleme.cn/#/zh-CN/component/tree
代码地址https://gitee.com/wBekvam/vue-shop-admin/blob/master/src/components/power/Roles.vue
后台返参 {
data: [
{
id: 101,
authName: '商品管理',
path: null,
pid: 0,
children: [
{
id: 104,
authName: '商品列表',
path: null,
pid: 101,
children: [
{
id: 105,
authName: '添加商品',
path: null,
pid: '104,101'
}
]
}
]
}
],
meta: {
msg: '获取权限列表成功',
status: 200
}
}
加载数据
常用属性
show-checkbox 显示复选框node-key 指选中的值为id值default-expand-all 是否默认展开所有节点 :default-checked-keys="defKeys" 默认选中节点ID值
<el-tree
:data="rightsList"
:props="treeProps"
ref="treeRef"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="defKeys"
></el-tree>
data () {
return {
// 所有角色列表
rolesList: [],
// 分配权限框
setRightDialogVisible: false,
// 权限列表
rightsList: [105,106],
// 树形控件的属性绑定对象
treeProps: {
label: 'authName',
children: 'children'
},
// 默认选中节点ID值
defKeys: [],
// 当前即将分配权限的Id
roleId: 0
}
},
显示当前角色拥有的所有权限
效果：
methods: {
// 分配权限
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.rightsList = res.data
// console.log(res)
// 递归获取三级节点的id
this.getLeafkeys(role, this.defKeys)
this.setRightDialogVisible = true
},
// 通过递归 获取角色下三级权限的 id, 并保存到defKeys数组
getLeafkeys (node, arr) {
// 没有children属性，则是三级节点
if (!node.children) {
return arr.push(node.id)
}
node.children.forEach(item => this.getLeafkeys(item, arr))
},
}
第次关闭时，清空已选中的数组，不然会叠加到下次打开的显示
// 权限对话框关闭事件
setRightDialogClosed () {
this.rightsList = []
},
获取选中的节点id以逗号分隔发送给后台
方法里getCheckedKeys 则返回目前被选中的节点的 keygetHalfCheckedNodes 则返回目前半选中的节点的 key
点击确定时调用下面的函数
<el-button type="primary" @click="allotRights">确 定</el-button>
// 分配权限
async allotRights (roleId) {
// 获得当前选中和半选中的Id
const keys = [
...this.$refs.treeRef.getCheckedKeys(),
...this.$refs.treeRef.getHalfCheckedKeys()
]
// join() 方法用于把数组中的所有元素放入一个字符串
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
}