Element-ui tree组件在父节点选中的情况下让子节点部分选中

最新推荐文章于 2023-09-01 15:37:08 发布

Nyaro

最新推荐文章于 2023-09-01 15:37:08 发布

阅读量890

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_14814421/article/details/117717633

版权

Element-ui tree组件在父节点选中的情况下让子节点部分选中

在使用element-ui时经常会遇到需要展示默认选中的情况，当子节点部分选中时，我们希望后端给我们的数据只包含子节点的数据，根据element-ui的官方文档，子节点选中时父节点会自动的选中，但是当子节点选中时会默认子节点全部选中。然而有时后端给我们的数据是包含了部分子节点以及父节点选中的数据，这样我们页面展示的时难免会与我们的预期结果不符。
通过文档可以看到设置默认选中除了setCheckedKeys方法外，还有对node进行操作的setChecked方法，所以在设置默认选中时只需对叶子节点进行设置，父节点无论是否有后端数据返回都会被选中。参考代码：

list = ["a","b","c"] //后端返回需要选中的节点
list.forEach(function(i){
	var node = this.$refs.tree.getNode(i);
	if(node.isLeaf){
		this.$refs.tree.setChecked(node,true)
	}
})

清空选中直接使用 $this.$refs.tree.setCheckedKeys([])