1、模板:
data定义:
data() {
return {
defaultProps: {
children: 'child',
label: 'name'
},
select: [],
permission: [],
roleName: '',
roleList: [],
dialogAddgsVisible: false,
title: '',
checkBoxData: [],
tableKey: 1,
list: null,
}
},
2、
js处理:
2.1 查询出该角色拥有的权限
handleUpdate(val) {
this.dialogAddgsVisible = true
this.title = '编辑下拉选项'
roleDetail(val.roleId).then(response => {
if (response.code === 0) {
this.ruleForm = response.role
this.select = response.role.menuIdList
console.log('==该角色拥有的权限===', this.select)
}
this.setChecked()
})
this.getbList()
},
2.2系统拥有的全部权限
// 获取所有权限
getbList() {
const datas = []
permissionData(this.id).then(response => {
console.log('查看返回数据' + response.code)
this.permission = response.menuList
console.log('查看返回数据的长度', response.menuList)
this.getDataTree(datas)
})
},
2.3将查询到的权限构建为数组
// 构建数组结构
getDataTree(datas) {
datas = this.permission
datas.forEach(ele => {
const parentId = ele.parentId
if (parentId === 0) {
// 不处理
} else {
datas.forEach(d => {
if (d.menuId === parentId) {
let childArray = d.child
if (!childArray) {
childArray = []
}
childArray.push(ele)
d.child = childArray
}
})
}
})
datas = datas.filter(ele => ele.parentId === 0)
this.permission = datas
if (this.permission.length === 0) {
this.loading = '暂无数据'
}
console.log('查看返回数据的长度2:' + this.permission)
},
2.3向el-tree中set选中状态
// 向el-tree中set状态
setChecked() {
console.log('===进入设置状态==', this.select)
const getCheck = this.select
if (getCheck.length > 0) {
getCheck.forEach((i, n) => {
const node = this.$refs.tree.getNode(i)
console.log('===循环==')
if (node != null) {
if (node.isLeaf) {
this.$refs.tree.setChecked(node, true)
} else {
node.indeterminate = true
node.checked = true
}
}
})
}
},