elementui 表格组件当select的时候 如何获取选中行的index
时间: 2024-02-26 14:56:28 浏览: 139
可以通过`@selection-change`事件来监听选择变化,同时可以在事件处理函数中获取选中行的数据,然后从数据中获取 index。
具体代码如下:
```html
<template>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
ref="table"
>
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 22 }
],
selectedRows: []
}
},
methods: {
handleSelectionChange(rows) {
this.selectedRows = rows
},
getSelectedRowIndexes() {
return this.selectedRows.map(row => {
return this.tableData.indexOf(row)
})
}
}
}
</script>
```
在 `handleSelectionChange` 方法中,将选中的行数据存储在 `selectedRows` 数组中。然后在 `getSelectedRowIndexes` 方法中,遍历 `selectedRows` 数组,使用 `indexOf` 方法获取每个选中行数据在 `tableData` 数组中的下标,即为选中行的 index。
阅读全文