Ant Design Vue - Tree实现右键功能

开局一张图，后面全靠吹水。

整体思路：本身树形控件已经提供了@rightClick方法，所以你只需要右键时去显示你想要的右键组件，并做对应的操作便可。

上图我是直接用了一个开源的组件 v-contextmenu ，详细的使用说明可以查看对应文档。

代码实现：

1. 项目添加v-contextmenu 模块

npm install -S v-contextmenu

1. 在修改工程main.js，引入v-contextmenu

import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'
Vue.use(contentmenu)

1. 部分html实现代码

 <div>
    <h1>Case Tree{{id}}</h1>
    <a-card :bordered="false" id="left">
      <a-tree
        v-if="treeData.length>0"
        :treeData="treeData"
        :defaultExpandAll="true"
        :showLine="true"
        @select="onSelect"
        @rightClick="onRightClick"
      ></a-tree>
      <v-contextmenu ref="contextmenu">
        <v-contextmenu-item @click="addNode">新增模块</v-contextmenu-item>
        <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>
    </a-card>
  </div>

1. 部门JS实现

const treeData = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
          children: [
            {title: '0-0-0-0', key: '0-0-0-0'},
            {title: '0-0-0-1', key: '0-0-0-1'},
            {title: '0-0-0-2', key: '0-0-0-2'},
          ],
        },
        {
          title: '0-0-1',
          key: '0-0-1',
          children: [
            {title: '0-0-1-0', key: '0-0-1-0'},
            {title: '0-0-1-1', key: '0-0-1-1'},
            {title: '0-0-1-2', key: '0-0-1-2'},
          ],
        },
        {
          title: '0-0-2',
          key: '0-0-2',
        },
      ],
    }
  ]
  export default {
    name: 'CaseTree',
    data () {
      return {
        id: '',
           treeItem: null, // 右键菜单
        tmpStyle: '',
        answer: '',
        treeData
      }
    },
    created () {
      this.id = this.$route.query.projectId
    },
    methods: {
      onSelect (selectedKeys, info) {
        console.log('selected', selectedKeys, info)
        console.log(info)
      },
      onRightClick ({event, node}) {
        console.log(event)
        console.log(node)
        const answer = node._props.dataRef.anwer
        if (answer) {
          this.$refs.contextmenu.hide()
          this.answer = answer
          return
        }
        this.treeItem = {
          id: node._props.eventKey,
          title: node._props.title,
          parentId: node._props.dataRef.parentId || null
        }
        const x = event.clientX
        const y = event.clientY
        const postition = {
          top: y,
          left: x
        }
        this.$refs.contextmenu.show(postition)
      },
      // 用于点击空白处隐藏右键菜单
      clearMenu () {
        this.treeItem = null
      },
      addNode () {
      },
      editNode () {
      },
      deleteNode () {
      }
    }
  }