前言
之前实现过点击节点时设置高亮功能了,在另一篇文章里。但又要求在点击除叶子节点外其他的比如一级节点、二级节点时,不出现高亮效果并且,保持上一个点击的叶子节点高亮状态。接下来说一下实现方法。
(首先说明,我的例子里,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()
}
})
}
})
}
}
}
结语:以上就是本次问题解决方法,希望我能记住。