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