element表格组件实现右键菜单的功能

要实现element表格组件的右键菜单功能，需要使用第三方插件——vue-context-menu

下面是具体步骤：

1. 安装vue-context-menu，可以用npm或yarn进行安装

npm install vue-context-menu

1. 在组件中引入vue-context-menu

```

```

1. 在表格组件中绑定contextmenu事件，并阻止默认事件

```
<el-table
:data="tableData"
@contextmenu.native.prevent

```

1. 在表格组件中加入context-menu组件，并向其传递数据

```
<context-menu
:data="menuData"
@select="handleContextmenuSelect"

```

menuData是一个数组，每一项代表一个菜单项，可以设置菜单项的名称、图标、样式以及点击回调函数等。handleContextmenuSelect是菜单项点击的回调函数。

1. 在表格组件中定义handleContextmenu方法，用于记录右键点击事件产生的位置，以便在右键菜单中正确显示

handleContextmenu(e){
e.preventDefault()
this.menuTop = e.clientY
this.menuLeft = e.clientX
}

1. 在表格组件中定义handleContextmenuSelect方法，用于处理右键菜单项的点击事件

handleContextmenuSelect(command){
switch(command){
case 'edit': // 执行编辑操作
break
case 'delete': // 执行删除操作
break
}
}

1. 在表格组件中使用计算属性，根据menuTop和menuLeft的值动态计算菜单的位置

computed:{
menuStyle(){
return {
top: this.menuTop + 'px',
left: this.menuLeft + 'px'
}
}
}

1. 在表格组件中加入template，用于在右键事件触发时显示右键菜单。在template中设置菜单项，并根据上面的计算属性设置菜单的位置

<template>
<context-menu
:data="menuData"
@select="handleContextmenuSelect"
:style="menuStyle"
></context-menu>
</template>

示例1：

如何在表格中添加一个菜单项，点击后可以调用delete()函数删除当前行？

假设delete()函数已经定义。

<el-table
  :data="tableData"
  @contextmenu.native.prevent="handleContextmenu($event)"
>
<template>
  <context-menu
    :data="menuData"
    @select="handleContextmenuSelect"
    :style="menuStyle"
  ></context-menu>
</template>
</el-table>
<script>
import contextMenu from 'vue-context-menu'
export default {
  components:{ contextMenu },
  data(){
    return {
      tableData:[{...}]  // 表格数据
      menuData:[          // 右键菜单项
        { name:'删除', command:'delete' }
      ],
      menuTop:0,          // 菜单显示的y坐标
      menuLeft:0          // 菜单显示的x坐标
    }
  },
  methods:{
    handleContextmenu(e){
      e.preventDefault()
      this.menuTop = e.clientY
      this.menuLeft = e.clientX
    },
    handleContextmenuSelect(command){
      switch(command){
        case 'delete':
          this.delete()
          break
      }
    },
    delete(){
      // 删除当前行
    }
  },
  computed:{
    menuStyle(){
      return {
        top: this.menuTop + 'px',
        left: this.menuLeft + 'px'
      }
    }
  }
}
</script>

示例2：

如何在表格中添加两个菜单项，一个是'编辑'，一个是'删除'，点击后分别执行edit()和delete()函数？

假设edit()和delete()函数已经定义。

<el-table
  :data="tableData"
  @contextmenu.native.prevent="handleContextmenu($event)"
>
<template>
  <context-menu
    :data="menuData"
    @select="handleContextmenuSelect"
    :style="menuStyle"
  ></context-menu>
</template>
</el-table>
<script>
import contextMenu from 'vue-context-menu'
export default {
  components:{ contextMenu },
  data(){
    return {
      tableData:[{...}]  // 表格数据
      menuData:[          // 右键菜单项
        { name:'编辑', command:'edit' },
        { name:'删除', command:'delete' }
      ],
      menuTop:0,          // 菜单显示的y坐标
      menuLeft:0          // 菜单显示的x坐标
    }
  },
  methods:{
    handleContextmenu(e){
      e.preventDefault()
      this.menuTop = e.clientY
      this.menuLeft = e.clientX
    },
    handleContextmenuSelect(command){
      switch(command){
        case 'edit':
          this.edit()
          break
        case 'delete':
          this.delete()
          break
      }
    },
    edit(){
      // 执行编辑操作
    },
    delete(){
      // 执行删除操作
    }
  },
  computed:{
    menuStyle(){
      return {
        top: this.menuTop + 'px',
        left: this.menuLeft + 'px'
      }
    }
  }
}
</script>

阅读剩余 78%