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 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark5 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_5 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy6 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy6 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼6 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子6 小时前
迭代器和生成器
前端·javascript
洋葱头_7 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing7 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
源猿人10 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化