vue在el-table内结合v-contextmenu对行添加鼠标右键自定义菜单

最新推荐文章于 2024-06-04 20:09:44 发布
最新推荐文章于 2024-06-04 20:09:44 发布
阅读量5.1k 收藏 9
点赞数 3
分类专栏： 笔记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44403402/article/details/107347087
版权

vue在el-table内结合v-contextmenu对行添加鼠标右键自定义菜单

最近工作上要求在el-table的表格内屏蔽浏览器原生右键菜单，更换为自定义的菜单。期间走了不少弯路，也查阅了不少博客资料，最后终于做出来一个自己觉得还说的过去的比较像浏览器原生的自定义菜单（此处滑稽）。
这里利用的时v-contextmenu实现的，具体安装简单使用百度就可以知道，就不过多解释了。
首先，右击表格行可以弹出自定义菜单，选择下列菜单项可以给v-contextmenu-item添加@click方法，如下图在这里插入图片描述
至此就可以显示了。但是我遇到了一个问题，就是我是利用div将整个表格包裹起来的，右击空白处同样会弹出此菜单。而我并不想这么做，我想实现的是如果表格内无数据，右击则不会弹出此菜单，所以利用了上图的v-contextmenu的disabled属性来控制菜单的显示。
其中rightCurrentContent是利用el-table的@rowRightClick方法来获取到改行第一列的Num在这里插入图片描述
当右击该行时获取row中的第一列的值，然后为包裹表格的div添加@contextMe

最低0.47元/天 解锁文章
Magic cape
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-table，右键菜单，并且获取当前行数据，单元格数据
m0_74908831的博客
06-24 2408
contextmenu.prevent=“onContextmenu” 是插件的右键菜单事件，@cell-contextmenu="onCellRightClick"则是，表格的时间，有两个参数，一个是行数据，一个是列数据，方便我们获取鼠标右键所在单元格数据，两个方法具体如下columnData ，rowData 这两个变量到data下整个空进去吧，点击返回，我在返回加了当前鼠标右键的单元格数据是什么，你们想要做什么自己搞。ok进入正题在elementui表格中右键弹出菜单，做一些有趣的事情。
简单好用的环境右键菜单VueContextMenu
08-12
简单好用的环境(右键)菜单 ---- Vue Context Menu
element-plus表格添加简单右键
最新发布
缘如风的博客
06-04 661
element-plus表格添加简单右键
vue-contextmenu右键点击菜单栏
coolgirljsinw的博客
03-13 1552
在我使用这个插件的的时候，出现了问题，一个是刷新完之后 第一次点击出现的右侧菜单栏 位置是不正确，二是跟随滚动。6.事件操作 （大部分的示例中都没有传点击参数，注意！是我根据自己的数据进行了调整，需注意 ）1.阻止浏览器默认事件 @contextmenu.prevent="show($event)"4.使用插件 <vue-context-menu></vue-context-menu>2.下载包 npm install vue-contextmenu --save。3.在mian.js里面引入。
Vue2学习笔记:事件对象、事件冒泡、默认行为
weixin_30873847的博客
02-21 234
1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script>...
vue3使用@imengyu/vue3-context-menu完成antv/x6右键菜单
SunFlower914的博客
01-26 1649
vue3使用@imengyu/vue3-context-menu完成antv/x6右键菜单：npm i@imengyu/vue3-context-menu@1.3.6
vue3+vite的项目中实现右键事件的神器
浩星
07-21 1628
vue3+vite的项目中实现右键事件的神器：@imengyu/vue3-context-menu
Vue+element-ui添加自定义右键菜单的方法示例
01-21
1、在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件 <el size=medium contextmenu.prevent.native=openMenu($event)> ...... 2、在页面编写右键菜单内容 <ul v-show=visible xss=removed class=...
vue el-table实现自定义表头
10-15
主要为大家详细介绍了vue el-table实现自定义表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue el-table实现行内编辑功能
10-15
首先，我们需要在`el-table`的表头部分自定义一个“新增”按钮，以便用户能够动态添加新的行数据。这可以通过使用`slot="header"`来完成。在`<template>`标签中定义一个按钮，绑定点击事件`@click`，当点击时调用...
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
在Vue2.0结合ElementUI2.0的项目开发中，常常会遇到表格列数不固定，需要根据数据动态渲染的情况。本篇文章将详细介绍如何实现`el-table`的循环动态列渲染。 首先，ElementUI的`el-table`组件通常通过`<el-table-...
el-table简单实现右键菜单
weixin_46341296的博客
12-30 2175
el-table简单实现右键菜单
Vue多个组件内使用右键菜单vue-contextmenu指向不正确问题
qq_43082438的博客
09-22 1321
Vue多个组件内使用右键菜单vue-contextmenu指向不正确问题
Vue2升级Vue3 --- vue变更
qq_44242707的博客
01-29 1640
本文的语法变更基于gogocode篇中进行进一步说明 gogocode篇：https://blog.csdn.net/qq_44242707/article/details/122742884 一.语法变更 1.package.json - "vue-template-compiler": "^2.6.11", + "@vue/compiler-sfc": "3.1.0"， - "vue-loader": "^15.9.1", + "vue-loader": "^16.0.0", // gogoco.
Vue实现右键菜单（vue-contextmenu模块）
Hello World
04-06 6462
文章目录*Vue实现右键菜单（vue-contextmenu模块）*一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 Vue实现右键菜单（vue-contextmenu模块） 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 代码如下（示例）： data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv') print(data.head()) 每天一个提升
Vue右键菜单(vue-contextmenu)
热门推荐
Codernmx
02-05 1万+
使用右键点击出现删除，以及更多操作菜单，需要多个可以在注释//菜单选项处menulists下多添加几个对象，并且绑定需要响应的methods 安装 npm install vue-contextmenu --save main.js引入 import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 使用 <template> <div id="app"
右键弹出菜单组件 vue-context-menu
千里之行，始于足下！
03-29 2803
右键弹出菜单组件 vue-context-menu
el-table右键行实现下拉菜单
07-08
要在 el-table 中实现右键行的下拉菜单，你可以按照以下步骤进行操作： 1. 在 el-table 中的每一行添加一个自定义的右键菜单触发事件。可以使用 el-row 的 @contextmenu 事件来实现这一点。例如： ```html <el-table :data="tableData"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-row @contextmenu="handleContextMenu(scope.row)"> <el-button type="text">右键菜单</el-button> </el-row> </template> </el-table-column> </el-table> ``` 2. 在 Vue 组件的 methods 中定义 handleContextMenu 方法来处理右键菜单事件。该方法将接收当前行的数据对象作为参数。你可以在该方法中打开自定义的下拉菜单或执行其他操作。例如： ```javascript methods: { handleContextMenu(row) { // 在这里打开自定义的下拉菜单或执行其他操作 console.log('右键菜单', row); } } ``` 这样，当用户在 el-table 中的某一行上右键点击时，就会触发 handleContextMenu 方法，并将当前行的数据传递给该方法。你可以根据需要在 handleContextMenu 中实现自定义的下拉菜单功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值