el-tree基于已选择的数据反选功能

今天做项目的时候需要实现对el-tree树组件进行反选,开始的时候写了各种循环和递归,还想记录父节点和子节点之间的关联关系,最后发现有更简单的办法,这里记录一下供大家参考,都是手敲的代码,如有错误,请大家手动更正一下。

首先看下element官网getCheckedNodes方法的参数说明

(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数,1. 是否只是叶子节点,默认值为 false 2. 是否包含半选节点,默认值为 false

实际场景使用中,如果一个节点含有子集,那么我们没有必要关心当前节点是否勾选,因为所有子集勾选后,会自动勾选父级节点

// 首选获取当前树组件已经选中的数据,注意方法使用的参数
const checkedNodes =  this.$refs.tree(el-tree组件绑定的ref).getCheckedNodes(true, true) // 获取当前已经选中节点
this.treeData(el-tree绑定的数据).forEach((item) => {
    this.$refs.tree.setChecked(item, true, true) // 把所有的子节点都勾选上
})
checkedNodes.forEach(() => {
    this.$refs.tree.setChecked(item, false, true) // 把之前获取到已经勾选的子节点给取消掉
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容