vue+elementui Tree组件实现右键菜单

最新推荐文章于 2024-06-24 17:39:01 发布

原创

最新推荐文章于 2024-06-24 17:39:01 发布 · 置顶 · 3.8k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #elementui #treeview

本文介绍了一个基于Vue的Tree组件实现，该组件支持通过右键菜单进行节点的新增和删除操作。利用@xunlei/vue-context-menu插件创建了上下文菜单，并结合El-Tree组件完成功能开发。

需求是tree组件实现新增与删除节点的功能，在查阅了很多文章之后，缝缝补补实现了功能

npm install @xunlei/vue-context-menu --save

<div id="dataPage">
  <el-tree
    id="el-tree"
    :data="flowTree.root"
    :props="flowTree.props"
    @node-click="selectFlow"
    @node-contextmenu="rightClick"/>
  <vue-context-menu
    :target="contextMenuTarget"
    :show="contextMenuVisible"
    class="right-menu"
    @update:show="(show) => contextMenuVisible = show">
    <a
      href="javascript:;"
      @click="createDatabaseOrTable">新建</a>
    <a
      href="javascript:;"
      @click="deleteDatabaseOrTable">删除</a>
  </vue-context-menu>
</div>

import {
   
    component as VueContextMenu } from '@xunlei/vue-context-menu';
components: