Elementui中el-tree获取节点的选中、设置节点的选中
原创
©著作权归作者所有:来自51CTO博客作者百八烦恼风的原创作品,请联系作者获取转载授权,否则将追究法律责任
this.$refs.tree.getCheckedNodes()//返回的是数组,包含所有选中的节点,不只是叶子节点。
this.$refs.tree.setCheckedKeys(ids)//传递的是叶子节点的id合集
例子:
/**
* 节点被点击时的回调
* @param data - 传递给 data 属性的数组中该节点所对应的对象
*/
nodeClick (data) {
console.log(data)
if (data.type === 'user') {
// 筛选出已经选中的子节点的id集合
const treeCheckedNodeIds = [...new Set(this.$refs.tree.getCheckedNodes().filter(_item => !_item.child).map(item => item.id))]
// 获取当前节点的选中状态
if (!treeCheckedNodeIds.includes(data.id)) {
if (this.multiple) {
// 多选
this.$refs.tree.setCheckedKeys([data.id, ...treeCheckedNodeIds])
} else {
// 单选
this.$refs.tree.setCheckedKeys([data.id])
}
} else {
if (this.multiple) {
// 多选
this.$refs.tree.setCheckedKeys([...treeCheckedNodeIds.filter(item => item !== data.id)])
} else {
// 单选
this.$refs.tree.setCheckedKeys([])
}
}
}
}