elementUI el-tree树形控件如何实现右键的hover效果

新手上路,请多包涵

使用el-tree结构数,从后端请求接口渲染的数据;如何实现鼠标右键点击某条目录跳出菜单点击菜单数据后还是显示高亮只到点击下一个;浏览器的右键菜单我禁止了;

 <el-tree
              class="filter-tree"
              :data="towerData"
              :props="defaultProps"
              :default-expand-all="true"
              :filter-node-method="filterNode"
              :expand-on-click-node="false"
              ref="tree"
              slot="reference"
              highlight-current
              node-key="id"
              @node-click="hidedialog = false"
              @node-contextmenu="contextmenuClick"
            >
            </el-tree>

我把接口数据提取出一部分测试:
towerData: [{

      pilename: "0",
      pilelist: [
        {
        "towerguid": "75fc4c28-5013-5e1adc04554",
        "lon": 108.95431,
        "pilename": "N5802",
        "lat": 33.36075,
        "height": 971.8
      },
      {
        "towerguid": "76083874-5013-5e1adc04554",
        "lon": 108.957736,
        "pilename": "N5803",
        "lat": 33.360703,
        "height": 1086
      },
      {
        "towerguid": "76168474-8d6c-54e1adc04554",
        "lon": 108.951583,
        "pilename": "N5804",
        "lat": 33.357781,
        "height": 1120
      },
      {
        "towerguid": "762270f4-9ce3-5e1adc04554",
        "lon": 108.961542,
        "pilename": "N5805",
        "lat": 33.355142,
        "height": 1110.9
      },
      {
        "towerguid": "7630eb1a-ab9-54e1adc04554",
        "lon": 108.968747,
        "pilename": "N5806",
        "lat": 33.38285,
        "height": 1173
      }],
    },
  ],

鼠标右击监听方法:

method:{
  // 鼠标右击事件
    contextmenuClick(ev, data, node) {
    //方法一:不正确,没有实现效果
    //这种方式只能实现左键的高亮效果,实现不了右键的效果
      // this.$nextTick(function(){
      // this.$refs['tree'].setCurrentKey(node.id);
      // })
    //方法二:不正确,没有实现效果
    //ev.path[1].style.background='red';
  }
}

方法二效果图:他这个之前点击的移除不掉;
image.png

哪位大神能帮忙看一下这个要怎么实现呢??

阅读 1.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题