vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题

文章为本新手菜鸡的问题记录,如有错误和不足还请大佬指正

文章目录


前言

文章主要解决两个问题:

1、点击el-table表格某行,触发事件

2、解决el-table的操作栏点击和row-click冲突问题


一、点击el-table表格某行,触发事件

查阅elementUI参考文档发现table可以通过@row-click事件来管理点击触发事件

c 复制代码
<template>
  <div>
  <el-table
	:data="state.orgTreeData"
	style="width: 100%"
	v-loading="state.loading"
	@row-click="handleClick"
	>
		<el-table-column></el-table-column>
	</table>
	</div>
</template>
<script lang="ts" setup name="admin/org">
const handleClick = (row) => {
  onEdit(row)
}
</script>

二、解决el-table的操作栏点击和row-click冲突问题

1.问题:

点击el-table某一行跳转到详情页,使用row-click(当某一行被点击时会触发该事件)后,会导致点击操作栏的按钮也会触发

例如下图中,点击表格某行跳转使用row-click,会触发左侧操作栏的按钮

2.解决方法

原生标签使用@click.stop,按钮el-button不是原生标签使用@click.native.stop,阻止事件冒泡

代码如下(示例):

c 复制代码
 <el-table-column label="操作" width="220" fixed="right" header-align="center" align="center">
 	<template #default="{ row }">
 		<el-button icon="ele-EditPen" size="small" text type="primary" @click.native.stop="onEdit(row)">编辑</el-button>
        <el-button icon="ele-Clock" size="small" text type="primary" @click.native.stop="onDelay">延期</el-button>
        <el-button icon="ele-Delete" size="small" text type="danger" @click.native.stop="onDelete(row)">删除</el-button>
    </template>
</el-table-column>
相关推荐
前端 贾公子5 分钟前
Monorepo + vite 怎么热更新
前端
然我42 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
向宇it2 小时前
【unity组件介绍】URP Decal Projector贴花投影器,将特定材质(贴花)投影到场景中的其他对象上。
游戏·3d·unity·c#·游戏引擎·材质