Vue el-table实现右键菜单功能

Vue el-table实现右键菜单功能的攻略如下：

一、实现思路

Vue el-table实现右键菜单功能的主要思路是：通过vue指令或自定义指令，实现鼠标右键点击el-table行时，弹出菜单框，并显示相应菜单项。

二、实现步骤

1. 引入Element UI，安装并导入el-table组件；

2. 安装并导入vue-contextmenu组件，该组件为右键菜单插件；

3. 在el-table上绑定自定义指令v-contextmenu，指定该指令的参数为菜单项数组；

4. 定义自定义指令v-contextmenu，实现鼠标右键点击事件，在指令中使用vue-contextmenu组件即可。

三、示例

以下是关于Vue el-table实现右键菜单功能的两个示例说明：

示例1：

<template>
  <div>
    <el-table :data="tableData" v-contextmenu:rightClickMenu="menus">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import VueContextMenu from 'vue-contextmenu'

export default {
  name: 'Example',
  components: {
    VueContextMenu
  },
  data () {
    return {
      tableData: [{
        name: '张三',
        age: 18,
        address: '北京市'
      }, {
        name: '李四',
        age: 20,
        address: '上海市'
      }],
      menus: [{
        action: () => alert('新增'),
        title: '新增'
      }, {
        action: () => alert('编辑'),
        title: '编辑'
      }, {
        action: () => alert('删除'),
        title: '删除'
      }]
    }
  },
  directives: {
    rightClickMenu: {
      bind: function(el, binding) {
        el.addEventListener('contextmenu', function(e) {
          e.preventDefault();
          binding.value.contextMenu.show(e, binding.value.options)
        })
      }
    }
  }
</script>

说明：

上述示例中，通过在el-table上绑定自定义指令v-contextmenu并指定menus数组，即可在el-table上实现右键菜单功能。menus数组中包含三个菜单项，每个菜单项有自己的点击事件。

示例2：

<template>
  <div>
    <el-table :data="tableData" v-contextmenu:rightClickMenu="{contextMenu: contextMenu, options: {}}">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <vue-contextmenu ref="contextMenu">
      <contextmenu-item v-for="(menu, index) in menus" :key="index" @click="menu.action">{{menu.title}}</contextmenu-item>
    </vue-contextmenu>
  </div>
</template>

<script>
import VueContextMenu from 'vue-contextmenu'

export default {
  name: 'Example',
  components: {
    VueContextMenu
  },
  data () {
    return {
      tableData: [{
        name: '张三',
        age: 18,
        address: '北京市'
      }, {
        name: '李四',
        age: 20,
        address: '上海市'
      }],
      menus: [{
        action: () => alert('新增'),
        title: '新增'
      }, {
        action: () => alert('编辑'),
        title: '编辑'
      }, {
        action: () => alert('删除'),
        title: '删除'
      }]
    }
  },
  directives: {
    rightClickMenu: {
      bind: function(el, binding, vnode) {
        vnode.context[binding.arg] = binding.value.contextMenu;
        el.addEventListener('contextmenu', function(e) {
          e.preventDefault();
          binding.value.contextMenu.show(e, binding.value.options)
        })
      }
    }
  }
}
</script>

说明：

上述示例中，通过在el-table上绑定自定义指令v-contextmenu并传入contextMenu，再在vue-contextmenu组件中传入菜单项数组menus，即可在el-table上实现右键菜单功能。contextMenu为右键菜单组件的实例，利用ref属性获取其实例并传入vnode.context中。menus数组中包含三个菜单项，每个菜单项有自己的点击事件。

四、总结

通过以上两个实例，可以看出Vue el-table实现右键菜单功能的主要实现步骤是：引入Element UI和vue-contextmenu组件，绑定自定义指令v-contextmenu并传入菜单项数组，定义自定义指令v-contextmenu并实现鼠标右键点击事件，传入vnode.context中并在vue-contextmenu组件中展示菜单项。