vue实现table右键菜单

实现右键菜单的基本思路

在Vue中实现表格的右键菜单功能，可以通过监听表格行的contextmenu事件来触发自定义菜单的显示。需要创建一个独立的菜单组件，并在触发事件时动态设置菜单位置和内容。

创建右键菜单组件

创建一个独立的右键菜单组件ContextMenu.vue，包含菜单的HTML结构和样式：

<template>
  <div 
    v-show="visible" 
    class="context-menu" 
    :style="{ top: y + 'px', left: x + 'px' }"
    @click.stop
  >
    <div 
      v-for="(item, index) in menuItems" 
      :key="index" 
      class="menu-item"
      @click="handleClick(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    x: Number,
    y: Number,
    menuItems: Array
  },
  methods: {
    handleClick(item) {
      this.$emit('menu-click', item)
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style>
.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  z-index: 1000;
}

.menu-item {
  padding: 8px 15px;
  cursor: pointer;
}

.menu-item:hover {
  background: #f0f0f0;
}
</style>

在表格组件中使用右键菜单

在表格组件中引入右键菜单组件，并监听行的右键点击事件：

<template>
  <div>
    <table>
      <tr v-for="(row, index) in rows" :key="index" @contextmenu.prevent="showMenu($event, row)">
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
      </tr>
    </table>

    <ContextMenu
      :visible="menuVisible"
      :x="menuX"
      :y="menuY"
      :menu-items="menuItems"
      @menu-click="handleMenuClick"
      @update:visible="menuVisible = $event"
    />
  </div>
</template>

<script>
import ContextMenu from './ContextMenu.vue'

export default {
  components: { ContextMenu },
  data() {
    return {
      rows: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ],
      menuVisible: false,
      menuX: 0,
      menuY: 0,
      currentRow: null,
      menuItems: [
        { label: '编辑', action: 'edit' },
        { label: '删除', action: 'delete' },
        { label: '复制', action: 'copy' }
      ]
    }
  },
  methods: {
    showMenu(e, row) {
      this.menuVisible = true
      this.menuX = e.clientX
      this.menuY = e.clientY
      this.currentRow = row
    },
    handleMenuClick(item) {
      switch(item.action) {
        case 'edit':
          this.editRow(this.currentRow)
          break
        case 'delete':
          this.deleteRow(this.currentRow)
          break
        case 'copy':
          this.copyRow(this.currentRow)
          break
      }
    },
    editRow(row) {
      console.log('编辑行:', row)
    },
    deleteRow(row) {
      console.log('删除行:', row)
    },
    copyRow(row) {
      console.log('复制行:', row)
    }
  }
}
</script>

关闭菜单的交互处理

添加全局点击事件监听，当点击菜单外部时关闭菜单：

<script>
export default {
  // ...其他代码
  mounted() {
    document.addEventListener('click', this.closeMenu)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.closeMenu)
  },
  methods: {
    closeMenu() {
      this.menuVisible = false
    },
    // ...其他方法
  }
}
</script>

动态菜单内容

可以根据不同的行数据动态生成菜单项：

methods: {
  showMenu(e, row) {
    this.menuVisible = true
    this.menuX = e.clientX
    this.menuY = e.clientY
    this.currentRow = row

    // 动态生成菜单项
    this.menuItems = [
      { label: `编辑 ${row.name}`, action: 'edit' },
      { label: `删除 ${row.name}`, action: 'delete' }
    ]
  }
}

使用第三方库的简化方案

如果不想手动实现，可以使用第三方库如vue-context：

安装依赖：

npm install vue-context

使用示例：

<template>
  <div>
    <table>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-context:contextmenu="row">{{ row.name }}</td>
        <td>{{ row.age }}</td>
      </tr>
    </table>

    <context ref="contextmenu">
      <li @click="editRow">编辑</li>
      <li @click="deleteRow">删除</li>
    </context>
  </div>
</template>

<script>
import VueContext from 'vue-context'

export default {
  components: { 'context': VueContext },
  data() {
    return {
      rows: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ],
      currentRow: null
    }
  },
  methods: {
    editRow() {
      console.log('编辑:', this.currentRow)
    },
    deleteRow() {
      console.log('删除:', this.currentRow)
    }
  }
}
</script>