element -table怎么获取每行
时间: 2024-01-09 09:03:32 浏览: 50
您可以使用 Element Plus 表格的 `row-click` 或 `row-dblclick` 事件获取每一行的数据,或者使用表格的 `getCurrentRow()` 方法获取当前选中的行数据。以下是一个示例:
```
<template>
<el-table
:data="tableData"
@row-click="handleRowClick"
@row-dblclick="handleRowDblclick">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
},
methods: {
handleRowClick(row) {
console.log('单击行数据:', row)
},
handleRowDblclick(row) {
console.log('双击行数据:', row)
},
getSelectedRow() {
const selectedRow = this.$refs.table.getCurrentRow()
console.log('选中行数据:', selectedRow)
}
}
}
</script>
```
在上面的示例中,我们通过 `row-click` 和 `row-dblclick` 事件分别获取单击和双击行的数据,也可以通过 `getCurrentRow()` 方法获取当前选中的行数据。