vue中使用elementui实现树组件tree右键增删改功能

Vue中使用ElementUI实现树组件Tree右键增删改功能，需要以下步骤：

1. 安装ElementUI

在项目中使用ElementUI，需要先安装ElementUI库。可以使用npm安装，具体命令为：

npm install element-ui --save

1. 引入ElementUI

在Vue项目中引入ElementUI，需要在main.js中加入以下代码：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

1. 定义树组件

定义树组件需要使用ElementUI的Tree组件，并在data中定义树结构数据，例如：

<template>
  <div>
    <el-tree :data="treeData" :props="defaultProps" @node-contextmenu="handleContextMenu"></el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      treeData: [
        {
          id: 1,
          label: 'tree 1',
          children: [
            {
              id: 2,
              label: 'tree 1-1',
              children: []
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleContextMenu (event, node) {
      // 显示右键菜单，event为右键事件，node为当前节点
    }
  }
}
</script>

4.给树节点添加右键菜单

通过监听Tree组件的node-contextmenu事件可以捕获节点的右键事件，然后显示右键菜单。以下是添加右键菜单的代码实现：

<template>
  <div>
    <el-tree :data="treeData" :props="defaultProps" @node-contextmenu="handleContextMenu"></el-tree>
    <el-dropdown v-model="menuVisible" :click="false">
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click="append">添加子节点</el-dropdown-item>
        <el-dropdown-item @click="rename">重命名</el-dropdown-item>
        <el-dropdown-item @click="remove">删除</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data () {
    return {
      treeData: [
        {
          id: 1,
          label: 'tree 1',
          children: [
            {
              id: 2,
              label: 'tree 1-1',
              children: []
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      menuVisible: false,
      contextMenuNode: null,
      contextMenuX: 0,
      contextMenuY: 0
    }
  },
  methods: {
    handleContextMenu (event, node) {
      this.menuVisible = true
      this.contextMenuNode = node
      this.contextMenuX = event.clientX
      this.contextMenuY = event.clientY
      event.preventDefault() // 阻止默认行为
    },
    append () {
      this.contextMenuNode.children.push({ id: Date.now(), label: '新节点', children: [] })
    },
    rename () {
      this.contextMenuNode.editable = true
    },
    remove () {
      if (!this.contextMenuNode.parent) {
        return
      }
      const siblings = this.contextMenuNode.parent.children
      siblings.splice(siblings.indexOf(this.contextMenuNode), 1)
    }
  }
}
</script>

<style>
.el-dropdown-menu { min-width: 100px; }
.el-dropdown-item { padding: 5px 20px; line-height: 20px; }
</style>

以上示例代码实现了右键菜单的显示和三个功能：添加子节点、重命名、删除。

需要注意的是，当右键点击事件发生时，需要调用event.preventDefault()来阻止默认行为，否则会显示系统默认的右键菜单。

同时，在样式中增加了.el-dropdown-menu和.el-dropdown-item的样式，可以根据实际需要自行调整。

采用以上步骤实现的树组件，可以直接添加、重命名、删除节点，实现了树组件的右键增删改功能。