vue+elementui Tree组件实现右键菜单-蒲公英云

vue+elementui 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: { 
  'vue-context-menu': VueContextMenu,
},
data(){ 
  return { 
      flowTree: { 
      root: [],
      props: { 
        label: 'name',
        children: 'children',
      },
    },
    treeNodeData: '', // 存当前数据
    treeNode: '', // 存当前节点信息
    contextMenuVisible: false, // 让菜单显示
    contextMenuTarget: null,
  }
}，
methods: { 
  rightClick(e, data, node) { 
      this.treeNodeData = data;// 存当前数据
      this.treeNode = node;// 存当前节点信息
      console.log('rightClick', this.treeNodeData, this.treeNode);
      this.contextMenuVisible = true;// 让菜单显示
      console.log('0', e, '1', e.screenX, '2', e.screenY);
      const ele = document.querySelector('.right-menu');
      ele.style.position = 'fixed';
      ele.style.top = `${ e.clientY}px`;
      ele.style.left = `${ e.clientX + 10}px`; //根据鼠标点击位置设置菜单出现
  },
  createDatabaseOrTable() { 
    this.contextMenuVisible = false;
    console.log('createDatabaseOrTable', this.treeNodeData, this.treeNode);
  },
  deleteDatabaseOrTable() { 
    this.contextMenuVisible = false;
    console.log('deleteDatabaseOrTable', this.treeNodeData, this.treeNode);
  },
}
<style lang="less">
    #dataPage { 
    margin: 0 0;
    text-align: center;
    color: #2c3e50;
    height: 100%;
  }
  // 右键会选中文字，为了美观将它禁用
  #el-tree{ 
    user-select:none;
  }
  .right-menu { 
    font-size: 14px;
    position: fixed;
    background: #fff;
    border: solid 1px rgba(0, 0, 0, .2);
    border-radius: 3px;
    z-index: 999;
    display: none;
  }
  .right-menu a { 
    width: 150px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    display: block;
    color: #1a1a1a;
    padding: 2px;
  }
  .right-menu a:hover { 
    background: #bbb;
    color: #fff;
  }
  .right-menu { 
    border: 1px solid #eee;
    box-shadow: 0 0.5em 1em 0 rgba(0,0,0,.1);
    border-radius: 1px;
  }
  a { 
    text-decoration: none;
  }
</style>