1.如下图。显示出默认显示节点。然后进行多选添加,多选删除
实现思路:
1》后端返回勾选的列表,以及全部数据。
2》前端将,数组的数据-》树形数据
//伪代码
array-》map<key,Object>
let result=[]
array.forEach((ele)=>{
let parent = map[ele.upId]//获取第一个节点的父节点。
if(parent){
//存在上级节点,把子节点和父节点连接上
(parent.children || (parent.children)=[]).push(ele)
}else{
result.push(ele)//不存在就是根节点。直接加入
}
})
3》设置默认选中的节点defaultCheckedKeys
defaultCheckedKeys.length=0
defaultCheckedKeys=取到默认选中的数组数据
nextTick(()=>{
treeRef.value.setCheckedKeys(defaultCheckedKeys)
//vue3写法
})
4》修改勾选之后获取变化的节点。
let updateKeys = treeRef.value.getCheckedKeys()
//再将新的updateKeys与defaultCheckedKeys对比
过滤出新增的节点,删除的节点。