今天做项目的时候需要实现对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) // 把之前获取到已经勾选的子节点给取消掉
})