vue elementui table表格右键鼠标 自定义菜单内容

在Vue中使用Element UI的Table组件时，可以通过监听鼠标事件来实现自定义的右键菜单。以下是一个简单的示例，展示了如何在Element UI的Table组件中添加自定义右键菜单：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @contextmenu.prevent="openMenu"
    @click.right="openMenu"
  >
    <!-- 你的表格列 -->
    <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>
 
    <!-- 自定义菜单 -->
    <div
      v-show="menuVisible"
      :style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
      class="custom-menu"
    >
      <ul>
        <li @click="handleMenuClick('option1')">选项 1</li>
        <li @click="handleMenuClick('option2')">选项 2</li>
        <!-- 更多选项 -->
      </ul>
    </div>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...你的数据
      ],
      menuVisible: false,
      menuTop: 0,
      menuLeft: 0,
    };
  },
  methods: {
    openMenu(event) {
      this.menuVisible = true;
      this.menuTop = event.clientY;
      this.menuLeft = event.clientX;
    },
    handleMenuClick(option) {
      // 处理菜单点击事件
      this.menuVisible = false;
      // 根据点击的选项执行相应的操作
    },
  },
};
</script>
 
<style>
.custom-menu {
  position: fixed;
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  z-index: 1000;
  display: none;
}
 
.custom-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.custom-menu ul li {
  padding: 5px 10px;
  cursor: pointer;
}
 
.custom-menu ul li:hover {
  background-color: #f4f4f4;
}
</style>

在这个示例中，我们监听了contextmenu和click.right事件来触发右键菜单。当用户点击或右键表格时，openMenu方法被调用，并显示自定义的菜单。菜单通过CSS样式显示在鼠标位置上，并且通过handleMenuClick方法处理菜单项的点击事件。