el-table简单实现右键菜单

第一步，在el-table上的@row-contextmenu定义一个方法

 <el-table  @row-contextmenu="onTags">

import {
  ref
} from 'vue'

export const userRightMenu = () => {
	const rightMenuInfo = ref({
    visible: false,//默认隐藏自己自定义的菜单列表
    left: 0,
    top: 0,
    row: {},//el-table当前列表的信息
  })
  //右键菜单的方法
	 const onTags = (row, column, event) => {
    event.preventDefault();//阻止鼠标右键默认行为
    rightMenuInfo.value.row = row
    rightMenuInfo.value.left = event.clientX
    rightMenuInfo.value.top = event.pageY
    rightMenuInfo.value.visible = true
  }
  return {
    rightMenuInfo,
    onTags
  }
}
//在需要的界面引入
<script setup>
  import {
    userRightMenu
  } from '上面那个文件的位置'
  //引入
   const {
        rightMenuInfo,
        onTags
      } = userRightMenu()
</script>

第2步，在外面写出自己的自定义菜单列表

<div v-if="rightMenuInfo.visible" :style="{ left: rightMenuInfo.left + 'px', top: rightMenuInfo.top + 'px' }" style="position:fixed;">
<button>自定义按钮1</button>
<button>自定义按钮2</button>
<button>自定义按钮3</button>
</div>

好了，el-table右键菜单这样就好了