vue+elementUI实现右击指定表格列的单元格显示选择框

在Vue中结合Element UI实现右击指定表格列的单元格显示选择框，可以通过监听contextmenu事件来实现。以下是一个简单的示例：

<template>
  <el-table
    :data="tableData"
    @cell-contextmenu="handleContextMenu"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    ></el-table-column>
    <!-- 其他列 -->
  </el-table>
  <el-dropdown
    :show-timeout="0"
    trigger="click"
    @command="handleCommand"
    @visible-change="handleVisibleChange"
    placement="right-start"
  >
    <span style="display: none;">{{ selectedCellValue }}</span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="action1">操作1</el-dropdown-item>
      <el-dropdown-item command="action2">操作2</el-dropdown-item>
      <!-- 其他选项 -->
    </el-dropdown-menu>
  </el-dropdown>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据对象
      ],
      selectedCellValue: null,
      selectedRow: null,
      selectedColumn: null,
    };
  },
  methods: {
    handleContextMenu(row, column, event) {
      event.preventDefault();
      this.selectedCellValue = row[column.property];
      this.selectedRow = row;
      this.selectedColumn = column;
      // 显示下拉菜单的位置
      const dropdown = this.$el.querySelector('.el-dropdown');
      dropdown.style.position = 'fixed';
      dropdown.style.left = `${event.clientX}px`;
      dropdown.style.top = `${event.clientY}px`;
      this.$forceUpdate(); // 强制Vue更新，以显示下拉菜单
    },
    handleCommand(command) {
      // 处理下拉菜单项的点击事件
      console.log('Selected command:', command);
      // 执行对应的操作
    },
    handleVisibleChange(visible) {
      if (!visible) {
        // 隐藏下拉菜单时的处理
      }
    },
  },
};
</script>

在这个示例中，我们监听el-table的@cell-contextmenu事件来触发下拉菜单的显示。当用户右击表格单元格时，我们记录下该单元格的值、行数据和列数据，并设置下拉菜单的位置。用户选择下拉菜单中的项目后，我们通过handleCommand方法处理对应的逻辑。