有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

el-tree 默认选中(el-tree父子节点相互关联操作)

vue 炮渣日记 2周前 (11-18) 9次浏览 已收录 0个评论 扫描二维码
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);
			return;
		}
	}
	// 添加勾选
	let [arr,newArr] = [[],this.$refs.organizationTree.getCheckedKeys()];
	arr.push(checkedKeys);
	function dealData(arr,newArr){
		for(var i in arr){
			newArr.push(arr[i].id);
			dealData(arr[i].children,newArr);
		}
	}
  // arr代表当前点击的节点
  // newArr代表获取出来的当前节点以及其下的所有子节点的id
	dealData(arr,newArr);
	this.$refs.organizationTree.setCheckedKeys(newArr);
  // newJsonArr代表所有选中的节点
	let newJsonArr = this.$refs.organizationTree.getCheckedNodes();
	this.accessibleList = newJsonArr;
	console.log(this.accessibleList);
},
  

最后打印结果this.accessibleList是一个类数组对象

同学们可根据自己需要来获取数组、对象、逗号字符串等多种格式的数据

el-tree 默认选中(el-tree父子节点相互关联操作)
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址