el-table @row-click影响复制以及el-table-column的点击事件

最新推荐文章于 2024-05-14 11:44:37 发布
最新推荐文章于 2024-05-14 11:44:37 发布
阅读量1k 收藏 9
点赞数 6
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41867900/article/details/135996389
版权
文章讨论了如何在表格(row-click)事件中添加内容判断，仅当用户未选中内容时执行，以及如何在el-table-column的点击事件上使用.stop@click.stop阻止事件向上冒泡。
摘要由CSDN通过智能技术生成

问题一影响复制

在row-click的函数里面加一个内容判断 if (window.getSelection().toString() === '') 只有当选中的内容为空的时候才执行row-click

问题二影响el-table-column的点击事件

el-table-column的点击事件上的点击事件加上.stop @click.stop修饰符可以阻止事件继续向上传递，即停止事件冒泡的过程。

yggjdle
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
监听element-ui table滚动事件的方法
10-17
这里的`height`属性用于设置表格的高度，`ref="table"`是为了在Vue实例中引用表格，`@row-click`是表格行点击事件的处理函数。 2. **绑定监听事件** 在Vue实例的`mounted()`生命周期钩子中，我们需要获取表格的`...
vue element 中的table动态渲染实现（动态表头）
10-15
`@cell-click`事件监听单元格点击，可以根据业务需求进行相应操作。 在实际应用中，我们可能还需要处理更复杂的情况，比如合并单元格、自定义表头、排序和筛选等功能。这需要结合Element UI提供的API以及Vue的响应...
elementUI el-table @row-click 解决行内冲突--忽略指定列区域点击效果
Sunshine_Jian的博客
12-22 7689
单击el-table行的时候；忽略指定列；
关于row-click和current-change
nanjo_yoshino0712的博客
05-30 4724
row-click，是只有当点击行的时候才会触发，如果没有点击行，只是行数据或行焦点改变，是无法触发该事件； current-change，是当前行变化时触发，即使不点击某行，只要行数据或行焦点改变了，就会触发该事件，当然也包括“点击”不同行时，也会触发该事件 所以，有时候current-change可以直接替代row-click去使用
element-ui中的table，实现点击当前行就会选中当前行
最新发布
m0_63237100的博客
05-14 344
这样就能实现点击行的任意位置就会选中当前行，但是存在某些特定列被点击的时候不需要选中当前行的情况，比如操作栏中的编辑删除按钮等。这个时候可以给当前列绑定点击事件，加上.stop修饰符就可以了。给el-table绑定row-click事件。handleRowClick的代码如下。
element UI 的row-click事件如何使用参数？
热门推荐
Gochan_Tao的博客
03-18 6万+
1 <template> 2 <el-table 3 :data="tableData" 4 stripe 5 @row-click="handdle" 6 style="width: 100%"> 7 <el-table-column 8 prop="date" 9 lab
element-ui中表格@row-click方法自定义传参的写法
正一品程序员的博客
09-07 5547
官方文档默认只能传三个参数，要传第四个参数可以加一个箭头函数。 @row-click="(row,column,e)=>handleRowClicked(row,column,e,'unitName')" 获取参数 handleRowClicked(row, column, event,type){ console.log(row,column,event,type) }, ...
el-table中row-click调用两次问题
jl____的博客
09-21 2508
el-table中row-click调用两次问题
给el-table-column添加指定列的点击事件
qq_51721168的博客
04-14 4214
要在tempmate中写上 {{booktitle}} 就是 el-table-column中的prop属性。这样单元格中才会显示内容，否则内容为空，绑定的方法中一定要传参数（scope.row）首先是要区分是vue2还是vue3，vue2和vue3中的用法是不一样的。这里是要插槽来实现的使用solt-scope 配合template来使用。只需要将 solt-scope换成 #default即可，其他用法一致。然后是vue3中的写法，vue3中的写法基本和vue2一致。首先是vue2中的写法。
element-table.pdf
11-19
<el-table-column fixed prop="date" label="日期" min-width="150"> <template slot-scope="scope"> <el-input v-if="isEditing === scope.$index" v-model="scope.row.date" placeholder="请输入内容"></el-...
vue element table中自定义一些input的验证操作
10-15
`el-table-column`内的`template`标签用于自定义列的显示内容，这里我们嵌套了`el-form-item`来实现验证功能。需要注意的是，每个`el-form-item`都应该有一个对应的验证规则，可以通过`:rules`属性进行动态绑定。 ...
Element实现表格嵌套、多个表格共用一个表头的方法
10-15
<el-table-column :label="item===scope.row.ext.default?'运送到':''" prop="area"></el-table-column> <el-table-column :label="item===scope.row.ext.default?'首重':''" prop="weight"></el-table-column> ...
el-table @row-click 传多余的参数 写法
josiecici的博客
07-22 2603
默认为三个参数 @row-click="(row,column,e)=>rowClickOne(row,column,e,item)" 传第四个参数
elementUI表格el-table中处理@row-click和按钮的关系
Charonmomo的博客
10-28 2504
背景 有一个使用elementUI制作的表格, 点击每行可以查看其他信息 (@row-click), 每行末尾有编辑和删除两个按钮, 可以对这一行进行操作. 问题 添加 @row-click 事件后, 编辑 和 删除 无法点击, 点击这两个按钮也会查看详细信息. 解决方法 在编辑 和 删除 这两个按钮的点击事件上加上.stop, 阻止向上冒泡. @click.stop=" " 例如: <el-button type="button"
element 中row-click表格单行点击和单元格事件冲突解决方案
Cc
06-18 2181
<el-table v-loading="loading" ref="multipleTable" :data="pagination[activeName].tableData" tooltip-effect="dark" style="min-width: 1000px" @selection-change="selectionChange" ...
el-table按钮点击操作列事件阻止触发表格的行点击事件@row-click
weixin_45899022的博客
05-15 8016
问题：给el-table绑定行点击事件row-click，点击行时，触发表格的行点击事件，可是表格中有操作列，列中有其他点击事件，比如编辑和删除，此时点击编辑事件，也会触发表格的行点击事件了 解决办法： 在操作列的 @click 事件时添加 .stop <el-table-column label="操作" > <template slot-scope="scope"> <el-button type="text" @click.stop="handl
element table 当点击表格其他事件时，@row-click也会被同时触发
weixin_57237676的博客
01-13 577
当我点击其他表格的操作事件时，行点击事件也会被触发，所以，此时需要在相应的事件上加上。当某一行被点击时会触发该事件 @row-click。注意：这个方法只能vue2。
解决el-table的操作栏点击和row-click冲突问题
qq_37669585的博客
04-12 1596
解决办法使用： @click.stop阻止事件冒泡 表头绑定了每一列的默认事件 <el-table stripe :data="data" @row-click=" row => { reportUZX(row.name, row.degree, row.studentName, row.userId) } " > 对操作栏按钮绑定监听@click.stop，阻止事件冒泡，发挥按钮功能 <el-table-column label="操作
el-table在行单击时获取行的index
Lzero's伊甸园
05-14 7952
ElementUI中el-table如何在单击行时获取行的index
<el-table-column prop="phone" label="手机号"> </el-table-column> <el-table-column prop="nickName" label="昵称"> </el-table-column> <el-table-column prop="wechat" label="微信号"> </el-table-column> <el-table-column prop="address" label="购买地址"> </el-table-column> <el-table-column prop="email" label="物流单号"> </el-table-column> <el-table-column prop="consume" label="消费金额"> </el-table-column> <el-table-column prop="createTime" label="申请时间"> </el-table-column>这样的表格给物流单号那一列加点击复制按钮
06-13
好的，如果您正在使用Element UI，您可以在`el-table-column`组件的`slot-scope`属性中添加一个复制按钮。以下是一个实现复制物流单号的示例代码： ```html <template> <el-table :data="tableData"> <el-table-column prop="phone" label="手机号"></el-table-column> <el-table-column prop="nickName" label="昵称"></el-table-column> <el-table-column prop="wechat" label="微信号"></el-table-column> <el-table-column prop="address" label="购买地址"></el-table-column> <el-table-column label="物流单号"> <template slot-scope="{ row }"> <div>{{ row.email }}</div> <el-button @click="copyToClipboard(row.email)">复制</el-button> </template> </el-table-column> <el-table-column prop="consume" label="消费金额"></el-table-column> <el-table-column prop="createTime" label="申请时间"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { phone: '123456789', nickName: '张三', wechat: 'zhangsan123', address: '北京市朝阳区', email: '123456789@qq.com', consume: 100, createTime: '2021-01-01' }, { phone: '987654321', nickName: '李四', wechat: 'lisi123', address: '上海市浦东新区', email: '987654321@qq.com', consume: 200, createTime: '2021-02-01' }, ] }; }, methods: { copyToClipboard(text) { navigator.clipboard.writeText(text).then(function() { alert('已复制到剪贴板'); }, function() { alert('复制失败'); }); } } }; </script> ``` 在这个示例中，我们在`el-table-column`组件的`slot-scope`属性中使用了Vue的解构赋值语法来获取当前行的数据对象。我们在模板中添加了一个`<div>`元素来显示物流单号的内容，并在后面添加了一个`<el-button>`元素来实现复制按钮。当用户单击按钮时，它将会调用`copyToClipboard`方法，并将物流单号的文本内容作为参数传递给函数。在`copyToClipboard`函数中，我们将文本内容写入剪贴板，并在操作完成后显示一个提示框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值