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

  • Z时代
  • 2024-02-24
  • 分类：IT

使用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';
  }
}

方法二效果图：他这个之前点击的移除不掉；
elementUI el-tree树形控件如何实现右键的hover效果

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

以上是 elementUI el-tree树形控件如何实现右键的hover效果 的全部内容， 来源链接： utcz.com/p/936648.html

回到顶部