Element ui的el

jellybean 2022-02-01 30 浏览 0 评论

选中当前节点，他的子节点和父节点是否被选中，非常详细

直接上代码 之前也在网上搜过很多文章 总是多多少少有一些问题，那么我就把自己修改好的给到大家 希望可以帮到大家

最终效果贴图如下

// 通过check的回调里面获取节点id,再获取节点的node对象

currentChecked(data) {

const node = this.$refs.tree.getNode(data.id)

this.setNode(node)

},

// 递归设置子节点和父节点

setNode(node) {

if (node.checked) {

// 如果当前是选中checkbox,则递归设置父节点和父父节点++选中

this.setParentNode(node)

this.setChildNode(node)

} else {

// 如果当前是取消选中checkbox,则递归设置子节点全部取消选中

// this.removeParentNode(node)

this.removeChildNode(node)

}

},

// 递归设置父节点全部选中

setParentNode(node) {

if (node.parent) {

for (const key in node) {

if (key === 'parent') {

node[key].checked = true

this.setParentNode(node[key])

}

}

}

},

removeParentNode(node) {

if (node.parent) {

for (const key in node) {

if (key === 'parent') {

node[key].checked = false

this.removeParentNode(node[key])

}

}

}

},

// 递归设置子节点全部取消选中

setChildNode(node) {

if (node.childNodes && node.childNodes.length) {

node.childNodes.forEach(item => {

item.checked = true

this.setChildNode(item)

})

}

},

removeChildNode(node) {

if (node.childNodes && node.childNodes.length) {

node.childNodes.forEach(item => {

item.checked = false

this.removeChildNode(item)

})

}

},

直接可用哦！！！