怎么获取el-table的行
时间: 2023-10-18 13:07:44 浏览: 93
获取el-table表格中选中行的数据
你可以通过 `ref` 属性获取到 `el-table` 组件的实例,然后使用 `currentRow` 属性来获取当前选中的行数据,或者使用 `getSelection()` 方法来获取所有选中的行数据。
例如,给 `el-table` 添加一个 `ref` 属性:
```html
<el-table :data="tableData" ref="table">
<!-- 表头和列 -->
</el-table>
```
然后在 Vue 实例中,使用 `$refs` 来获取 `el-table` 的实例,然后就可以使用 `currentRow` 或 `getSelection()` 方法来获取行数据了。
```javascript
export default {
data() {
return {
tableData: [
{ name: 'John', age: 28 },
{ name: 'Mary', age: 24 },
{ name: 'Bob', age: 32 }
]
}
},
methods: {
getSelectedRows() {
const table = this.$refs.table
const selectedRows = table.getSelection()
console.log(selectedRows)
}
}
}
```
在上面的例子中,`getSelectedRows()` 方法会打印出所有选中的行数据。你也可以使用 `currentRow` 属性来获取当前选中的行数据,例如:
```javascript
getCurrentRow() {
const table = this.$refs.table
const currentRow = table.currentRow
console.log(currentRow)
}
```
阅读全文