问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

[ElementUi] 需要实现 `tree`组件上右键弹出菜单并且 `获得 tree node的id值`

头像
Raymond
    4.3k63264

    ElementUi官网 没有 tree组件的右键功能 , 请问哪里有 demo 参考 ?

    现在有一个需求需要在 tree 组件上实现 右键弹出功能菜单;

    但是实践操作 elementui tree 组件 仅响应左键;

    是否有大佬有相关解决思路. 或者类似demo参考;

    elementelement-uihtml5javascript
    阅读 10.3k
    1 个回答
    得票最新
    头像
    Raymond
      4.3k63264
      ✓ 已被采纳

      步骤流程

      [TOC]

      # 屏蔽页面右键默认显示的工具菜单

      为元素绑定一个 oncontextmenu 事件

      <body>
    <div id="app"  oncontextmenu="self.event.returnValue=false">
        // ...vue代码/模板
    </div>
</body>

      # 为元素绑定右键菜单

      思路: 右键元素(tree 节点)时触发节点左键绑定的事件

      <el-tree 
:data="data" 
:props="defaultProps" 
@node-click="handleNodeClick" 
@contextmenu.native='contextmenuTrigger=true'>

      此处注意, 右键菜单绑定在 tree 组件上

      # 在元素右键时获得 tree 节点的信息

      methods: {
  // handleNodeClick为 elementui 封装的事件函数(@node-click), 左键点击节点时触发;
  // http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian 搜索关键词: node-click 
  handleNodeClick(data) {
    console.log(data);
    // !核心 : 节点数据被获得
    this.thisformdata = data;
  }
}
      • 加上
      // vue钩子: 页面加载完毕后 , 通onload
mounted() {
    /**
    * 部门管理 tree 组件, 右键功能
    * 这里我借助了jq, 使用原生也可以, 核心思想即调用 tree 节点的左键事件
    * */
    $(document).on('contextmenu', '#departmentTree [role="treeitem"]', function (event) {
        // 此处阻止冒泡是因为节点层级过深, 必须阻止    
        event.stopPropagation();
        // 调用 tree 节点左键点击绑定的事件
        $(this).click();
    });
},

      # 最后, 点击桌面使得功能栏元素隐藏(即使得右键菜单元素失焦)

      建议参考: https://segmentfault.com/q/10...

      授人予鱼不如授人予渔

      虽然有烂尾的嫌疑, 但是

      来口交我啊!

      最后一步使得 功能栏失焦的方法 实在 想不出来, 可以联系我的qq, 在我的个人信息里;
      加好友时请附上你的简略信息
      !

      原文链接: https://segmentfault.com/q/10...

      附录1 :

      附录2 :

      查看全部 1 个回答
      被 1 篇内容引用
      推荐问题