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

相关推荐
落日沉溺于海12 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手14 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
an__ya__20 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
叶落阁主34 分钟前
Neovim 插件 i18n.nvim 介绍
java·vue.js·vim
叫我詹躲躲35 分钟前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
华仔啊35 分钟前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅38 分钟前
JavaScript 函数详解
前端·javascript
葡萄城技术团队41 分钟前
从基础到实战:一文吃透 JS Tuples 与 Records 的所有核心用法
javascript
@小红花1 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵2 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js