前端-树形控件

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对比
过滤出新增的节点,删除的节点。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值