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>
相关推荐
cnxy1887 分钟前
Python Web开发新时代:FastAPI vs Django性能对比
前端·python·fastapi
神仙姐姐QAQ7 分钟前
vue3更改.el-dialog__header样式不生效
前端·javascript·vue.js
脾气有点小暴8 分钟前
uniapp真机调试无法连接
前端·uni-app
AI_567810 分钟前
Vue.js 深度开发指南:从数据绑定到状态管理的最佳实践
前端·javascript·vue.js
Irene199110 分钟前
Sass常用语法总结
前端·sass
程序员爱钓鱼11 分钟前
Node.js 博客系统实战(一):项目需求分析
前端·后端·node.js
阿星AI工作室12 分钟前
魔改豆包输入法变电脑版,立即拥有千元AI语音输入法typeless平替
前端·人工智能
前端-文龙刚13 分钟前
浅记Vue3中 ref 和 reactive 是两种主要的响应式数据声明方式,它们有以下主要区别
前端·javascript·vue.js
小先生81215 分钟前
关于vue-element-plus-admin的mini分支踩坑集锦
前端·vue.js·前端框架·c#
hhcccchh15 分钟前
学习vue第十天 V-Model学习指南:双向绑定的魔法师
前端·vue.js·学习