el-table点击按钮获得一行的数据

最新推荐文章于 2025-07-04 22:30:09 发布

lkrdmm

最新推荐文章于 2025-07-04 22:30:09 发布

阅读量8.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue的插槽 slot-scope="scope" 文章标签： vue html

本文链接：https://blog.csdn.net/lkrdmm/article/details/109242042

Vue的插槽同时被 2 个专栏收录

1 篇文章

订阅专栏

slot-scope="scope"

1 篇文章

订阅专栏

本文介绍了在Vue中使用el-table组件时，如何在点击操作按钮时获取当前行的数据。通常通过@row-click事件可以获取行数据，但若只想在点击特定按钮时获取，可以利用插槽实现。提供了HTML和JavaScript代码示例，并给出了Vue插槽学习资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取某一行数据有两种方式：

第一种是在标签el-table上添加行单击事件***@row-click=“handleEdit**”*，但是有时候我们想只是点击一下某个操作按钮，比如保存按钮来获取row，这个时候这种方式就不合适了。所以此时我们用下面这种方法。

通过插槽的方式来获取：

HTML代码

// An highlighted block
<el-table-column label="操作">
	<template slot-scope="scope"> 
 		<el-button type="text" size="small" @click.native.prevent="savedata (scope.row)">
 		保存
 		</el-button>
    </template>
</el-table-column>

JavaScript代码

// An highlighted block
savadata(row) {
	console.log(row)
}

如果想了解下插槽的原理，戳戳这里就行
链接: VUE的插槽.