文章为本新手菜鸡的问题记录，如有错误和不足还请大佬指正
文章目录
- 前言
- 一、点击el-table表格某行，触发事件
- 二、解决el-table的操作栏点击和row-click冲突问题
- 1.问题：
- 2.解决方法
前言
文章主要解决两个问题：
1、点击el-table表格某行，触发事件
2、解决el-table的操作栏点击和row-click冲突问题
一、点击el-table表格某行，触发事件
查阅elementUI参考文档发现table可以通过@row-click事件来管理点击触发事件
<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，阻止事件冒泡
代码如下（示例）：
<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>
