vue3 element plus怎么获取table中每行的数据
时间: 2024-03-18 14:38:33 浏览: 1359
vue+element获取el-table某行的下标,根据下标操作数组对象方式
如果你使用的是 Element Plus 的 `<el-table>` 组件,你可以通过在 `<el-table>` 上监听 `row-click` 或 `row-dblclick` 事件,并在事件处理函数中获取当前行的数据。
例如,可以在 `<el-table>` 上绑定 `@row-click` 事件,然后在事件处理函数中使用 `$event.row` 获取当前行的数据,如下所示:
```html
<el-table :data="tableData" @row-click="handleRowClick">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
```
```js
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
]
}
},
methods: {
handleRowClick(row) {
console.log(row)
// 在这里处理当前行的数据
}
}
}
```
在上面的例子中,当用户单击某一行时,`handleRowClick` 方法会被调用,并将当前行的数据作为参数传入。你可以在这个方法中处理当前行的数据,比如将它保存到组件的数据中,或者进行其他操作。
阅读全文