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

Raymond
  • 4.2k

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


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

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

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

回复
阅读 6.8k
1 个回答
✓ 已被采纳

步骤流程

[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 :

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

宣传栏