HTML:
<el-tree
ref="elTreeRef"
:data="menuVos"
:props="{ children: 'children', label: 'name' }"
:check-strictly="false"
show-checkbox
node-key="id"
:default-checked-keys="roleForm.menuIds"
@check="handleCheckChange"
/>
JS:
const elTreeRef = ref<InstanceType<typeof ElTree>>()
const menuVos = ref([]) //菜单树列表
const roleForm:any = reactive({})
/**
* 获取树节点选中时的id集合
*/
function handleCheckChange(data1: any, data2: any) {
// 选中的子节点
const checkedKeys = data2.checkedKeys
// 选中的父节点
const halfCheckedKeys = data2.halfCheckedKeys
checkMenuList.value = [...checkedKeys, ...halfCheckedKeys]
}
//数据回显,data.hasIds就是接口返回选中的树节点id集合
//菜单树数据
menuVos.value = data.menuVos
//数据回显操作
nextTick(() => {
const arr: any = []
data.hasIds.forEach((item: any) => {
if (
!elTreeRef.value?.getNode(item).childNodes ||
!elTreeRef.value?.getNode(item).childNodes.length
) {
arr.push(item)
}
})
roleForm.menuIds = arr
elTreeRef.value?.setCheckedKeys(arr)
})