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

相关推荐
你的人类朋友1 小时前
【Node】认识multer库
前端·javascript·后端
可触的未来,发芽的智生3 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
前端开发爱好者3 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀3 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
天***88965 小时前
js封装一个双精度算法实现
开发语言·前端·javascript
胡斌附体5 小时前
使用Electron创建helloworld程序
前端·javascript·electron·nodejs·pc
toobeloong5 小时前
Electron 从低版本升级到高版本 - webview通信的改造
前端·javascript·electron
im_AMBER5 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界5 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript