ant design vue 和 v-contextmenu右键点击菜单实现树tree 增删改查

实现思路：

vue的实现思路和前面写的react版本的是一样的…

ant design vue 有一个右键点击的API @rightClick, 所以想自己扩展基于树结构的增删改查功能还是蛮简单的。

我这里实现的是，右键点击会出现操作菜单面板，点击新增、编辑、删除按钮会弹出相应的操作弹窗。

右键单击出现的菜单是用v-contextmenu实现的

v-contextmenu文档说明：https://github.com/snokier/v-contextmenu

效果展示：

部分代码实现：

因为项目里还有设计其他的业务逻辑，这里只展示了核心代码。

首先把v-contextmenu引入项目，这里不多说了，GitHub上面写的很详细

在main.js 把v-contextmenu引入

import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'

Vue.use(contentmenu)

html:

<a-card :bordered="false" class="card-box">
      <div class="left" id="left">
        <a-tree
          v-if="treeData.length>0"
          :treeData="treeData"
          :defaultExpandAll="true"
          @select="this.onSelect"
          @rightClick="this.onRightClick"
        >a-tree>
        <v-contextmenu ref="contextmenu">
          <v-contextmenu-item @click="addNode">新增子节点v-contextmenu-item>
          <v-contextmenu-item @click="editNode">编辑节点v-contextmenu-item>
          <v-contextmenu-item @click="deleteNode">删除节点v-contextmenu-item>
        v-contextmenu>
      div>
      <div class="right">
        <div v-html="answer">div>
      div>
a-card>

js:

export default {
  data () {
    return {
      NodeTreeItem: null, // 右键菜单
      nodeId: 0,
      treeData: []
     }
  },
  methods: {
    onSelect (selectedKeys, info) {
      this.nodeId = selectedKeys[0];
      // ...
    },
   onRightClick ({ event, node }) {
      const answer = node._props.dataRef.anwer;
      if (answer) {
        this.$refs.contextmenu.hide()
        this.answer = answer;
        return;
      };
      this.NodeTreeItem = {
        id: node._props.eventKey,
        title: node._props.title,
        parentId: node._props.dataRef.parentId || null
      };
      const x =
        event.currentTarget.offsetLeft + event.currentTarget.clientWidth + 10;
      // 因为我放在页面上的box有滚动条，所以需要减掉该盒子的scrollTop
      const y = event.currentTarget.offsetTop - document.getElementById('left').scrollTop;
      const postition = {
        top: y,
        left: x
      };
      this.$refs.contextmenu.show(postition);
    },
    // 用于点击空白处隐藏增删改菜单
   clearMenu () {
      this.NodeTreeItem = null;
    },
    orgAdd () {
     // 写自己的业务逻辑
    },
    orgEdit () {
    // 写自己的业务逻辑
    },
    orgDelete () {
    // 写自己的业务逻辑
    }

less:

.card-box {
  position: static;
}

需要注意的地方：

如果右键点击，显示的菜单位置不对的话，检查一下父级元素的定位问题。

offsetLeft 是返回距离上级盒子（带有定位）左边的位置
offsetTop 同理

所以父级盒子不能带有定位。否则位置就不准确了。