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

相关推荐
萌萌哒草头将军5 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫15 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中5 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊6 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿6 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj6 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝6 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3117 小时前
react必备JavaScript知识点(二)——类
前端·javascript
珠峰下的沙砾7 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
前端_学习之路7 小时前
javaScript--数据结构和算法
javascript·数据结构·算法