el-tree删除节点后跳转下一节点或者上一节点或者父节点，触发节点点击事件

效果图

要通过 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);
            }
          }
        },