需求:点击父节点勾选所有子节点,点击子节点仅勾选自己;全选情况下如果取消某个子节点,则父节点也取消勾选,但不影响其他子节点。以保证删除节点时层级关系不变
//el-tree绑定方法 @check="handleCheck"
handleCheck(data) {
data.isChecked = !data.isChecked
//递归修改子节点选中状态
const changeNode= (node, ischecked) => {
node.map(item => {
this.$refs.tree.setChecked(item.id, ischecked)
item.isChecked = ischecked
if (item.children && item.children.length) changeNode(item.children, ischecked)
})
}
if (data.children && data.children.length) {
changeNode(data.children, data.isChecked)
}
//取消选中,遍历父节点链路,修改父节勾选状态
if (!data.isChecked) {
let ancestors = data.ancestors.split(",")
ancestors.map(item => {
this.$refs.tree.setChecked(item, false)
this.checkNode(item)
})
}
},
//递归查找父节点
checkNode(id) {
const findNode = (data) => {
for (let item of data) {
if (item.id == id) {
item.isChecked = false
return
}
if (item.children && item.children.length) {
findNode(item.children)
}
}
}
findNode(this.treeData)
},
数据结构:添加 isChecked字段标识是否选中