el-tree勾选自动展开子节点并触发@check-change事件

        在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);
          }
        })
    }
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值