前端-树形控件

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
    评论
好的,我可以为您提供一个简单的前端手写级联树形控件示例,您可以根据自己的需求进行修改和优化。 HTML部分: ```html <div id="tree"></div> ``` JS部分: ```javascript var data = [ { "id": 1, "name": "节点1", "parentId": 0 }, { "id": 2, "name": "节点2", "parentId": 0 }, { "id": 3, "name": "节点1-1", "parentId": 1 }, { "id": 4, "name": "节点1-2", "parentId": 1 }, { "id": 5, "name": "节点2-1", "parentId": 2 }, { "id": 6, "name": "节点2-2", "parentId": 2 }, { "id": 7, "name": "节点1-1-1", "parentId": 3 }, { "id": 8, "name": "节点1-1-2", "parentId": 3 } ]; var tree = document.getElementById("tree"); function createTree(data, parentId, level) { var ul = document.createElement("ul"); for (var i = 0; i < data.length; i++) { if (data[i].parentId == parentId) { var li = document.createElement("li"); li.innerHTML = data[i].name; li.setAttribute("data-id", data[i].id); li.setAttribute("data-level", level); ul.appendChild(li); var childUl = createTree(data, data[i].id, level + 1); if (childUl) { li.appendChild(childUl); } } } return ul.innerHTML ? ul : null; } tree.innerHTML = createTree(data, 0, 1).outerHTML; var selectedId = null; tree.addEventListener("click", function(e) { var target = e.target; if (target.tagName == "LI") { var id = target.getAttribute("data-id"); var level = target.getAttribute("data-level"); if (id != selectedId) { selectedId = id; console.log("您选择了ID为" + id + ",层级为" + level + "的节点"); } } }); ``` 这段代码实现了一个简单的树形结构,您可以根据自己的需要进行修改和优化。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值