el-tree父子节点相互关联操作

最新推荐文章于 2024-08-19 17:48:03 发布

前端大伟

最新推荐文章于 2024-08-19 17:48:03 发布

阅读量1.5k

点赞数

分类专栏：代码分享经验分享

本文链接：https://blog.csdn.net/sake_pipi/article/details/108993370

版权

本文探讨了在Element UI中如何实现在点击父节点时选中所有子节点，以及点击子节点保持父节点选中状态的功能。由于Element UI官方未直接提供此功能，需要自行编写代码实现。文中提供了实现思路和代码示例，适用于组织架构等树形结构场景。最终，通过操作可得到类数组对象`accessibleList`，便于按不同需求获取数组、对象或字符串等格式的数据。

摘要由CSDN通过智能技术生成

本次研究课题为：

el-tree如何在点击父节点时全部选中所有子节点，点击子节点时，父节点依然是选中状态

这个功能在elementui中不予提供，要自己写

下面给小伙伴们提供一下思路和代码

例如组织架构树形结构

<el-tree
	:data="data"
	show-checkbox
	default-expand-all
	node-key="id"
	ref="organizationTree"
	highlight-current
	@check="chooseDepartment"
	:expand-on-click-node="false"
	:check-strictly="true"
	:props="defaultProps">
</el-tree>

chooseDepartment(checkedKeys,checkedData){
	// 取消勾选
	let [accessibleList,getCheckedKeys] = [this.accessibleList,this.$refs.organizationTree.getCheckedKeys()];
	// 循环删除this.accessibleList中的项
	for(var i in accessibleList){
		if(accessibleList[i].id == checkedKeys.id){
			this.accessibleList.splice(i,1);
			console.log(this.accessibleList);
			return;
		}
	}
	// 添加勾选
	let [arr,newArr] = [[],this.$refs.organizationTree.getCheckedKeys()];
	a