1 获取 父子节点 key 当前 key = id 设置el-tree
TypeScript
<el-tree
v-if="isShowTree"
ref="treeRef2"
style="max-width: 260px"
:data="assistantListTree"
show-checkbox
:default-expand-all="isExpandAll"
node-key="id"
:check-strictly="false"
:props="{
children: 'children',
label: 'resourceName'
}"
/>
const assistantListTree = ref([])
const isExpandAll = ref(false)
const permissionIds = ref([])
// 菜单节点全选及半选数据id - key
const getMenuAllCheckedKeys_ids = () => {
// 目前被选中的菜单节点
let checkedKeys = treeRef1.value!.getCheckedKeys()
// 半选中的父级菜单节点
let halfCheckedKeys = treeRef1.value!.getHalfCheckedKeys()
permissionIds.value = [
...checkedKeys,
...halfCheckedKeys,
]
// 2 渠道/助理暂无数据
}
2 回显示处理
2 权限父子关联 又不想父级会显导致 子节点全选处理
TypeScript
// 请求节点详情数据 api==> ids
if (res.data?.code == 200) {
const { name, id, permissionIds } =
res.data?.data
// 回显权限角色选中状态
permissionIds &&
permissionIds.forEach((key_id: number | string) => {
// (key/data, checked, deep) 接收三个参数
treeRef1.value!.setChecked(key_id, true, false) // 第三个参数false 父节点不会选中所以子节点
})
// 指定部门数据之间相互独立
}