效果图
要通过 JavaScript 触发 el-tree 的点击事件,你可以使用 Element UI 提供的 $refs 来获取 el-tree 实例,然后调用实例的方法来触发点击事件。
首先,在 el-tree 上添加一个 ref 属性,ref="Tree",以便在 JavaScript 中引用它。例如:
<template>
<el-tree class="tree-line" :props="defaultProps" :load="loadNode" :indent="0" :expand-on-click-node="false"
@node-click="handleNodeClick" lazy ref="Tree" @node-contextmenu="rightClick" node-key="code" current-node-key="currentNodeKey">
</el-tree>
</template>
要在el-tree上设置参数current-node-key 和 node-key,使得点击事件点击每一个节点都可以触发is-current类方法
<div class='mytree' id="mytree" style="overflow:auto" v-loading="loading">
<el-tree class="tree-line" :props="defaultProps" :load="loadNode" :indent="0" :expand-on-click-node="false"
@node-click="handleNodeClick" lazy ref="Tree" @node-contextmenu="rightClick" node-key="code" current-node-key="currentNodeKey">
</el-tree>
</div>
设置is-current的样式
.mytree .el-tree-node.is-current>.el-tree-node__content {
color: #333 !important;
background-color: red;
}
如图所示
获取 el-tree 实例
const tree= this.$refs.Tree;
找到需要触发点击事件的节点
const node = tree.getNode(节点的 key 或者 data);
获取这个节点的上一节点、下一节点、父节点以及他们所对应的数据
console.log('下一节点',node.nextSibling);
console.log('上一节点',node.previousSibling);
console.log('父一节点',node.parent);
console.log('下一节点的数据',node.nextSibling.data);
console.log('上一节点的数据',node.previousSibling.data);
console.log('父一节点的数据',node.parent.data);
逻辑处理:当所要删除的这个节点的上一节点存在,就触发上一节点,没有上一节点,就找下一节点,没有下一节点再往上找父节点,如下所示:handleNodeClick 是树节点的点击事件
getNextClickNode() {
const tree= this.$refs.Tree;
const node = tree.getNode(this.currentData.code);
if (node.nextSibling) {
this.handleNodeClick(node.nextSibling.data)
} else if(node.previousSibling) {
this.handleNodeClick(node.previousSibling.data)
}else if(node.parent){
this.handleNodeClick(node.parent.data)
}
},
handleNodeClick(data) {
//点击事件 跳转路由等事件处理
},
再在删除节点的方法中调用getNextClickNode这个方法
//删除树节点
remove(newData) {
let self = this;
self.getNextClickNode()
this.$refs.Tree.remove(self.currentNode);
},
也可以用数组方法获取上一节点和下一节点,不过个人比较喜欢上面ref的方法
getBeforeNode(data,node){//获取同级前一个节点,data整棵树节点,node当前节点
for(let i=0;i<data.length;i++){
if(data[i].id == node.id){
if(i > 0){
return data[i-1];
}else{//没有前面一个节点
return null;
}
}else if(data[i].children){//有下级,递归查询
this.getBeforeNode(data[i].children,node);
}
}
},
getAfterNode(data,node){//获取同级后一个节点,data整棵树节点,node当前节点
for(let i=0;i<data.length;i++){
if(data[i].id == node.id){
if(i < (data.length - 1)){
return data[i+1];
}else{//没有后面一个节点
return null;
}
}else if(data[i].children){//有下级,递归查询
this.getAfterNode(data[i].children,node);
}
}
},