el-table按钮获取当前行元素

el-table按钮获取当前行元素

vue2

html 复制代码
		<el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-button size="mini" @click="toItem(scope.row)">用户详情</el-button>
            <el-button size="mini" @click="toUpdate(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>

el-table-column标签内部使用了 Vue 的插槽功能(slot),具体来说是使用了作用域插槽(scoped slot),通过 slot-scope="scope" 来声明作用域,然后在插槽内容中可以使用 scope 对象来获取当前行的数据对象。

vue3

html 复制代码
<template>
    <div>
        <el-table :data="tableData" style="border-radius: 5px;" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="date" label="Date" width="120" />
            <el-table-column prop="name" label="Name" width="120" />
            <el-table-column prop="address" label="Address" />
            <el-table-column label="操作" width="200px">
                <template #default="{ row }">
                    <el-button type="danger" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const tableData = ref([])

const handleDelete = (row) => {
	console.log(row)
}
</script>

该组件中通过 Vue 的插槽功能和事件处理函数来获取和处理表格中每一行的数据对象。当用户点击编辑或删除按钮时,会触发相应的事件处理函数,并且可以在函数内部获取到相应行的数据对象进行进一步的处理。

相关推荐
zhangzelin8881 分钟前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
软件技术NINI19 分钟前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html
鸿Hong40 分钟前
从事Vue开发之查漏补缺:深度选择器
vue.js
小小前端_我自坚强40 分钟前
vue提高技术 高级语法相关
前端·vue.js·前端框架
小小前端_我自坚强1 小时前
Vue 3 使用心得
前端·javascript·vue.js
华仔啊1 小时前
前端真的需要懂算法吗?该怎么样学习?
前端·javascript
笔尖的记忆1 小时前
【前端架构和框架】react准备知识
前端·javascript
渣哥1 小时前
从配置文件到 SpEL 表达式:@Value 在 Spring 中到底能做什么?
javascript·后端·面试
一小池勺1 小时前
改变上下文的 API:call, apply, bind
前端·javascript
Keepreal4962 小时前
使用Canvas绘制转盘
javascript·vue.js·canvas