账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    el-tree如何设置鼠标右击某条目录实现高亮也就是hover效果
    61
    0
    使用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'; }}方法二效果图:他这个之前点击的移除不掉;哪位大神能帮忙看一下这个要怎么实现呢??
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • ✎﹏ℳ๓初染♡ 普通会员 1楼

      在El-Tree(Electron Tree)中,你可以通过在树节点(Node)上绑定鼠标右键点击事件来实现高亮(hover)效果。以下是一个基本的示例:

      ```javascript import { Tree } from 'electron-tree';

      // 创建树节点实例 const tree = new Tree('myTree');

      // 创建一个高亮节点实例 const highlightedNode = tree.root.children.find(node => node.label === 'My Tree');

      // 在高亮节点上绑定鼠标右键点击事件 highlightedNode.on('contextmenu', (event, data) => { // 在这里,你可以根据你的需求处理鼠标右键点击事件,比如选择子节点、跳转到子目录等 event.preventDefault(); event.stopPropagation();

      // 获取鼠标点击的路径 const path = data.path;

      // 高亮指定路径的子节点 highlightedNode.moveTo(path); }); ```

      在这个示例中,我们首先创建了一个树节点(Tree)和一个高亮节点(highlightedNode)。然后,我们为highlightedNode上的contextmenu事件绑定了一个函数,该函数会在用户点击highlightedNode时被调用。

      在事件处理函数中,我们首先阻止了默认的点击事件,然后获取了鼠标点击的路径(通过调用data.path属性)。然后,我们使用moveTo方法将高亮节点移动到鼠标点击的路径上,这将使高亮节点显示为选中状态(即右键菜单中的"选择"选项被选中)。

      注意:在实际使用中,你需要根据你的需求来处理鼠标点击的路径。在上面的示例中,我们只是简单地将高亮节点移动到路径上,你可以根据你的具体需求添加更多处理逻辑,比如跳转到子目录、打开子节点的文件、加载子节点的内容等。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部