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>
相关推荐
magic 24524 分钟前
Spring 命名空间注入:p、c 与 .util 的深度解析
java·前端·spring
钢铁男儿44 分钟前
Python基本语法(函数partial)
前端·javascript·python
风清云淡_A1 小时前
【angular19】入门基础教程(三):关于angular里面的响应式数据入门使用
前端·angular.js
green_pine_1 小时前
Vue3学习笔记2——路由守卫
前端·vue.js·笔记·学习
空中湖1 小时前
纯前端专业PDF在线浏览器查看器工具
前端·pdf
七灵微1 小时前
ES6入门---第二单元 模块二:关于数组新增
前端·javascript·es6
GUIQU.2 小时前
【Vue】性能优化与调试技巧
前端·vue.js·性能优化
娃哈哈哈哈呀2 小时前
组件通信-mitt
前端·javascript·vue.js
wuhen_n2 小时前
鼠标悬浮特效:常见6种背景类悬浮特效
前端·css·css3·html5
娃哈哈哈哈呀2 小时前
组件通信-v-model
java·服务器·前端