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>
相关推荐
萧鼎几秒前
下一代AI App架构:前端生成,后端消失
前端·人工智能·架构
爱看书的小沐11 分钟前
【小沐学Web3D】three.js 加载三维模型(Angular)
前端·javascript·vue·webgl·three.js·angular.js·opengl
VillanelleS11 分钟前
前端工程化之模块化开发 & webpack
前端·webpack·node.js
CCChaya-软件技术教师1 小时前
21-盒子定位(CSS3)
前端·css·css3
陈随易1 小时前
对不起,我还是不推荐你用express和koa
前端·后端·程序员
独立开阀者_FwtCoder1 小时前
基于 MCP Http SSE模式的天气助手智能体开发实战(一文带你了解MCP两种开发模式)
前端·javascript·后端
前端大卫1 小时前
超简单!3 步搭建免费个人 Blog!【附源码】
vue.js·vitepress·前端工程化
月亮慢慢圆1 小时前
表格单元行合并方法
前端
方阿森1 小时前
MasterGo + MCP,借助 AI 实现设计稿转代码
前端·ai编程·mcp
逆袭的小黄鸭1 小时前
一文读懂 JavaScript 的各类继承方式
前端·javascript·面试