88.el-tree点击除叶子节点外其他节点时取消高亮并将点击前的叶子节点设置高亮状态(即保持点击其他节点前的状态)

前言

之前实现过点击节点时设置高亮功能了,在另一篇文章里。但又要求在点击除叶子节点外其他的比如一级节点、二级节点时,不出现高亮效果并且,保持上一个点击的叶子节点高亮状态。接下来说一下实现方法。

(首先说明,我的例子里,type为0或3的为叶子节点,type为1和2的为一级和二级节点)

1.在选中节点方法内判断type,移除或添加高亮的类名

// 左侧模块选中

leftTreeCheck(nodeBoj){

        if(nodeObj.type == '0' || nodeObj.type == '3'){

                let aa = document.querySelectAll('.leftNewTree')

                aa[0].classList.add("el-tree-highlight-current")

        }else{

                let aa = document.querySelectAll('.leftNewTree')

                aa[0].classList.remove("el-tree-highlight-current")

        }

}

2.在选中节点方法内判断type,type为0或3时将nodeObj.name赋值给newText;否则将nodeObj.id放入expandDefault数组内

// 左侧模块选中

leftTreeCheck(nodeBoj){

        if(nodeObj.type == '0' || nodeObj.type == '3'){               

                ......(上步代码)

                this.newText = nodeObj.name

                this.leftId = nodeObj.id

        }else{                

                ......(上步代码)

                this.expandDefault = []

                this.expandDefault.push(this.leftId)

        }

}

3.watch监听expandDefault数组,判断数组内id为00000的为未配置并点击该节点,其余的则遍历所有节点,当节点的innerText 包含 this.newText时,点击该节点

watch:{

        'expandDefault':function(newVal,oldVal){

                if(newVal.length >0){

                        this.$nextTick(() =>{

                                if(newVal[0] == '00000'){

                                        document.querySelector('.el-tree-node_content').click()

                                }else{

                                        let aaa = document.querySelectorAll('.el-tree-node_content')

                                        Array.from(aaa).map(item =>{

                                                if(item.innerText.includes(this.newText)){

                                                        item.click()

                                                }

                                        })

                                }

                        })

                }

        }

}

结语:以上就是本次问题解决方法,希望我能记住。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值