Vue:Table在点击删除的时候阻止行点击事件

目录

    • [一、 出现场景](#一、 出现场景)
    • [二、 解决方案](#二、 解决方案)

一、 出现场景

问题:给el-table绑定行点击事件row-click,点击行时,触发表格的行点击事件,可是表格中有操作列,列中有其他点击事件,比如编辑和删除,此时点击编辑事件,也会触发表格的行点击事件了

二、 解决方案

在操作列的 @click 事件时添加 .stop

html 复制代码
 <el-table-column  label="操作" >
    <template slot-scope="scope">
      <el-button type="text"  @click.stop="handleDelete(scope.row)">删除</el-button>
    </template>
 </el-table-column>
相关推荐
M ? A2 分钟前
Vue 迁移 React 实战:VuReact 一键自动化转换方案
前端·vue.js·经验分享·react.js·开源·自动化·vureact
yuki_uix3 分钟前
重排、重绘与合成——浏览器渲染性能的底层逻辑
前端·javascript·面试
Burt14 分钟前
我的 2026 全栈选型:Vue3 + Elysia + Bun + AlovaJS
vue.js·全栈·bun
止观止29 分钟前
拥抱 ESNext:从 TC39 提案到生产环境中的现代 JS
开发语言·javascript·ecmascript·esnext
沃尔威武32 分钟前
调试黑科技:Chrome DevTools时间旅行调试实战
前端·科技·chrome devtools
小锋java123439 分钟前
SpringBoot 4 + Spring Security 7 + Vue3 前后端分离项目设计最佳实践
java·vue.js·spring boot
一 乐39 分钟前
校园线上招聘|基于springboot + vue校园线上招聘系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·校园线上招聘系统
yuki_uix40 分钟前
虚拟 DOM 与 Diff 算法——React 性能优化的底层逻辑
前端·react.js·面试
时寒的笔记40 分钟前
js逆向7_案例惠nong网
android·开发语言·javascript
yuki_uix41 分钟前
从输入 URL 到页面显示——浏览器工作原理全解析
前端·面试