Vue3封装table表格右键菜单功能

1) 效果，右键单击单元格，打开菜单弹窗:

点击菜单选项，可选择只读/编辑，可在只读/编辑方法中，拿到该行列表格的数据，进行相关操作

2) 思路

1、右键菜单组件 出现的时机，是右键单击table表格@row-contextmenu ，Element-Plus有提供；且需要阻止右键单击默认事件@contextmenu.prevent。

2、右键菜单组件 出现的位置，根据右键单击table表格的位置 对 右键菜单组件的位置进行设置。

3、右键菜单组件 展示内容，数据的传递 textList 和 点击事件的位置clickXY（决定右键菜单组件出现的位置，需要在视口内）。

3、右键菜单组件 事件传递，这里没有使用emit的方式，而是调用textList数组对象中fnn字段传递给子组件的，子组件调用就可以触发 父组件定义的方法。

4、右键菜单组件 如何关闭，右键单击打开，左键单击关闭，需要监听点击点击事件的e.button，值如为 0：鼠标左键、 1：滚轮按钮或中间按钮（如果有）、 2：鼠标右键

3) 简单的写一下.vue文件代码

 前端代码在这里：https://github.com/wwaini/tao-vue3/tree/release240625

后端代码笔者用node写的，在这里：https://github.com/wwaini/tao-express

父组件（代码中有详细备注）

子组件 - 右键菜单组件

如有不足，欢迎指正。

不要忽视你达成的每个小目标，它是你前进路上的垫脚石。冲！