vue el-table @row-click 事件与行内点击事件冲突解决

1、按钮是el-button标签,为点击事件加.native.stop ,即 @click.native.stop=“handleClick(scope.row)”
2、按钮是原生标签,为点击事件加.stop ,即 @click.stop=“handleClick(scope.row)”

<el-table @row-click="handleCellClick">
  <el-table-column prop="name" label="Name">
  	<el-button type="primary" @click.native.stop=“handleClick(scope.row)”>Submit</el-button>
  </el-table-column>
  <el-table-column prop="age" label="Age">
  	<template slot-scope="scope">
  		<span @click.stop=“handleClick(scope.row)”></span>
  	</template>
  </el-table-column>
</el-table>

参考文献:https://blog.csdn.net/weixin_47941995/article/details/122977054

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
`el-table` 是 Element UI 的一个表格组件,如果你在使用 `@keydown.native` 后发现没有反应,可能是以下几个原因导致的: 1. 绑定的元素没有获取到焦点。如果你绑定的是某个元素的键盘事件,那么必须让这个元素获得焦点,才能触发键盘事件。对于 `el-table` 组件,可以通过设置 `highlight-current-row` 属性为 `true` 来让当前行获得焦点: ```html <el-table :data="tableData" highlight-current-row @keydown.native="handleKeyDown"> <!-- ... --> </el-table> ``` 2. 绑定的键盘事件不是原生事件。`@keydown.native` 只能监听键盘原生事件,例如 `keydown`、`keyup`、`keypress` 等,而不能监听浏览器默认的键盘事件,例如 `input`、`keydown.enter` 等。如果你想监听浏览器默认的键盘事件,应该使用其他的修饰符,例如 `@keydown.enter`。 3. 绑定的事件处理函数没有正确绑定到 Vue 实例上。如果你在 Vue 组件中使用 `@keydown.native`,那么需要确保事件处理函数正确绑定到 Vue 实例的方法中。例如,如果你的事件处理函数是一个类方法,可以使用箭头函数或 `.bind()` 方法将其绑定到 Vue 实例上: ```javascript export default { methods: { handleKeyDown: (event) => { console.log(event.keyCode); }, // 或者 handleKeyDown(event) { console.log(event.keyCode); }.bind(this), }, }; ``` 如果你检查了以上几个原因,仍然无法解决问题,可以尝试使用浏览器的开发者工具,查看控制台是否有相关的错误信息。另外,也可以将 `@keydown.native` 绑定到 `el-table` 的父元素上,看是否可以触发键盘事件

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值