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>
相关推荐
shawxlee1 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
用户059540174462 小时前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css
触底反弹2 小时前
🚀 从 DOM0 级到 React 合成事件:前端事件监听的 20 年演进史
前端·react.js·面试
kyriewen2 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
颜酱2 小时前
04 | 召回前置准备:搭好召回所需的四个数据库
前端·人工智能·后端
郝亚军3 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
IT_陈寒3 小时前
React的useEffect依赖项把我坑惨了
前端·人工智能·后端
东方小月4 小时前
从零开发一个Coding Agent:monorepo项目搭建
前端·后端·node.js
葬送的代码人生4 小时前
别再让 AI 瞎写代码了!Vibe Coding 三步法教你写出靠谱代码
前端·设计模式·架构
Shirley~~4 小时前
Code-Review-Graph:面向 AI 辅助代码审查的结构化上下文引擎
前端·ai编程