elementui tree获取父节点_el-tree父子节点相互关联操作

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

陆桥天

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

阅读量2.3k

点赞数

文章标签： elementui tree获取父节点

本文链接：https://blog.csdn.net/weixin_36204407/article/details/112467368

版权

本文探讨了如何在ElementUI的Tree组件中实现点击父节点选中所有子节点，以及点击子节点保持父节点选中状态的功能。由于ElementUI本身不直接提供此功能，作者分享了实现这一功能的思路和代码。最终，通过示例展示了获取数据的不同格式，如类数组对象。

摘要由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>

// methods方法
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);