在el-tree里使用复选框的时候,当节点没有被展开时,点击复选框只会触发当前点击节点的@check-change事件,但是业务需求是需要点击节点时,能够展开所有子节点并且全部都触发@check-change事件。
遇到的问题是,本来想在点击复选框的时候,获取到node, 通过node.expaned = true来实现节点展开,节点是展开了,但是不会再次去触发check-change事件了,达不到想要的效果。
解决方案是,在check-change事件的时候,可以执行一个展开节点的方法,在这个方法里呢,可以手动去触发check-change事件!这样就可以保证既可以展开节点,也能触发选中事件!
checkChangeClick(nodeData, checked, index) {
// 因为我是循环复用的el-tree组件,所以得通过index动态去拿到tree
let tree = this.$refs['treeRef' + index][0]
let node = tree.getNode(nodeData)
//展开选中的未展开的节点
this.expandCheckedNotExpandNodes(node, index);
if(checked){
// 业务代码...
} else {
// 业务代码...
}
},
// 展开选中的未展开的节点
expandCheckedNotExpandNodes(node, index) {
let tree = this.$refs['treeRef' + index][0]
if (node.checked && !node.expanded && !node.isLeaf) {
node.expand(function () {
let childNodes = node.childNodes;
for (let i = 0; i < childNodes.length; i++) {
let childNode = childNodes[i];
//手动触发check-change事件,事件处理函数中回继续调用此函数,形成递归展开
tree.$emit('check-change', childNode.data, childNode.checked, index);
}
})
}
},