el-table-column如何获取行数据的值
在Element UI的el-table组件中，你可以通过el-table-column的slot-scope属性（在Vue 2.x中）或者#default插槽的scope属性（在Vue 3.x中）来获取当前行的数据。以下是如何实现这一功能的详细步骤：
-
在
el-table-column中定义点击事件处理器：
你需要在el-table-column的模板中定义一个按钮，并为该按钮添加一个点击事件处理器。在Vue 2.x中，你可以使用slot-scope属性来访问当前行的数据；在Vue 3.x中，则使用#default插槽的scope属性。 -
在事件处理器中通过参数获取当前行的数据对象：
点击事件处理器会接收到一个参数（在Vue 2.x中是scope，在Vue 3.x中也是scope），该参数包含了当前行的数据。你可以通过scope.row来访问这些数据。 -
使用获取到的当前行数据进行后续操作或展示：
一旦你获取到了当前行的数据，就可以根据需要进行后续的操作或展示，比如删除、编辑当前行的数据等。
以下是一个基于Vue 2.x的示例代码：
<template><el-table :data="tableData"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column label="操作" width="200" align="center"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"></el-button><el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button></template></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ date: '2023-10-01', name: '张三' },{ date: '2023-10-02', name: '李四' }]};},methods: {handleEdit(row) {console.log('编辑当前行数据:', row);// 在这里添加编辑当前行数据的逻辑},handleDelete(row) {console.log('删除当前行数据:', row);// 在这里添加删除当前行数据的逻辑}}
};
</script>
如果你使用的是Vue 3.x，代码将略有不同，主要是将slot-scope替换为#default插槽的scope属性：
<template><el-table :data="tableData"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column label="操作" width="200" align="center"><template #default="scope"><el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"></el-button><el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button></template></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ date: '2023-10-01', name: '张三' },{ date: '2023-10-02', name: '李四' }]};},methods: {handleEdit(row) {console.log('编辑当前行数据:', row);// 在这里添加编辑当前行数据的逻辑},handleDelete(row) {console.log('删除当前行数据:', row);// 在这里添加删除当前行数据的逻辑}}
};
</script>
这两个示例都展示了如何在el-table-column中获取当前行的数据，并通过点击事件处理器进行后续操作。