vue3 el-table 右击

在 Vue 3 中使用 Element Plus 的 <el-table> 组件时，如果你想实现右击（右键点击）事件的处理，你可以通过监听 contextmenu 事件来实现。contextmenu 事件在用户尝试打开上下文菜单（通常是右键点击）时触发。以下是如何为 <el-table> 的行或单元格添加右击事件处理的基本步骤：

定义模板

首先，确保你的 Vue 3 项目已经安装并配置了 Element Plus。

复制代码

<template>
  <el-table :data="tableData" @row-contextmenu="handleRowContextmenu">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

添加方法处理右击事件

在你的 Vue 组件的 <script> 部分，添加一个方法来处理右击事件：

复制代码

<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  { date: '2023-04-01', name: '张三', address: '上海市普陀区金沙江路 1518 弄' },
  { date: '2023-04-02', name: '李四', address: '上海市普陀区金沙江路 1517 弄' }
]);
 
const handleRowContextmenu = (row, column, event) => {
  event.preventDefault(); // 阻止默认的上下文菜单显示
  console.log('右击行数据:', row); // 输出被右击的行数据
  // 在这里添加你的自定义逻辑，比如显示自定义的上下文菜单等
};
</script>

阻止默认的上下文菜单显示

在 handleRowContextmenu 方法中，使用 event.preventDefault() 来阻止浏览器默认的上下文菜单显示。这样，你可以完全控制如何响应用户的右击操作。

自定义上下文菜单（可选）

如果你想要显示一个自定义的上下文菜单，你可以使用 Element Plus 的 <el-dropdown> 或其他方式来实现。例如：

复制代码

<template>
  <div v-show="showContextMenu" :style="{ position: 'absolute', top: `${contextMenuTop}px`, left: `${contextMenuLeft}px` }">
    <el-dropdown>
      <span class="el-dropdown-link">
        操作<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleCustomOption">选项一</el-dropdown-item>
          <el-dropdown-item @click="handleCustomOption">选项二</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <el-table :data="tableData" @row-contextmenu="handleRowContextmenu">
    <!-- 列定义 -->
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
 
const tableData = ref(/* 数据 */);
const showContextMenu = ref(false); // 控制上下文菜单的显示隐藏
const contextMenuTop = ref(0); // 上下文菜单的顶部位置
const contextMenuLeft = ref(0); // 上下文菜单的左侧位置
 
const handleRowContextmenu = (row, column, event) => {
  event.preventDefault(); // 阻止默认的上下文菜单显示
  showContextMenu.value = true; // 显示自定义上下文菜单
  contextMenuTop.value = event.clientY; // 设置菜单位置基于鼠标点击位置
  contextMenuLeft.value = event.clientX; // 设置菜单位置基于鼠标点击位置
};
 
const handleCustomOption = () => {
  ElMessage('你选择了自定义操作'); // 示例：显示一个消息提示框
  showContextMenu.value = false; // 隐藏上下文菜单
};
</script>