<el-tree
:data="tableData"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
树节点由tableData渲染而出:
self.tableData = response.result.position
把此职位分配的权限(菜单)给勾上:
var ids = []
response.result.data.map((e) => {
ids.push(e.new_menu_id)
});
self.setCheckedKeys(ids);
setCheckedKeys (ids) {
this.$refs.tree.setCheckedKeys(ids)
},
小tips:setCheckedKeys方法传参ids,如果传了父节点,子节点也会被勾上,所以不用遍历到底
把修改过的权限,点保存,按层级提交给后端:
var checkedMenu = self.$refs.tree.getCheckedNodes(false, true);
小tips:getCheckedNodes方法,返回目前被选中的节点所组成的数组(不管父节点子节点都处于一层上,而且父节点的children下包含未选中的)
var checkedKeys = self.$refs.tree.getCheckedKeys();
getcheckedKeys方法,返回目前被选中的节点的key所组成的数组
去过滤掉未选中的节点
checkedMenu.forEach((e, index, arr) => {
if (e.children != null) {
new_menu_id.push(e)
}
})
new_menu_id.forEach((e) => {
e.subMenu = e.children.filter((v) => {
return checkedKeys.includes(v.id)
})
})