使用el-tree
来绘制角色权限,如图:
一般都是将选择treeList的id组发给后端,如:[11111111,22222222222,3333333333333,4444444444444]
,这里会出现一个问题,得先跟后端沟通好,就是半选问题,何为半选呢?看图:
半选节点就是有子节点且子节点没有完全被选中的节点。
假设后端要求你把半选节点也要传过去
你可以通过以下代码获取已选中的节点和半选节点
// ref 是el-tree
let list = this.$refs.tree.getCheckedKeys()
const halfList = this.$refs.tree.getHalfCheckedKeys()
list = [...list, ...halfList]
// or
this.$refs.tree.getCheckedNodes(false, true).map(item => item.id)
接下来就是把该数据传给后端就行了,新增这样就可以啦。
但是编辑的时候问题来了,一般情况下后台会返回你传给他的数据,这里面包含了半选节点的数据,但是设置el-tree
的时候,它才不知道你是不是半选节点,就会导致原来的半选节点现在帮你全部把该节点及子孙节点全部选中了,琢磨了好久,终于发现一个可以解决的:
this.treeList = await getTreeDate() // 这个是拿到的树的所有数据
const list = await getResource({ roleId: row.id }) // 这个是根据该角色拿到的tree数据
const roleTreeList = treeTool.toList(list).map(item => item.id) // 得到[111,222,3333] 的数据
this.$nextTick(() => { // 这个一定不能省略,因为第一次获取 this.$refs.tree可能是null
roleTreeList.forEach((item, n) => {
const node = this.$refs.tree.getNode(item)
if (node.isLeaf) {
this.$refs.tree.setChecked(node, true)
}
})
})