el-table怎么获得勾选数据的序号
时间: 2023-10-27 11:41:27 浏览: 117
获取el-table表格中选中行的数据
您可以通过监听`selection-change`事件来获取选择的数据的索引。在事件回调函数中,通过`selection`参数可以获取到当前选择的数据数组。然后,您可以使用`Array`的`indexOf`方法来获取选择的数据在原始数据数组中的索引。
以下是一个示例代码:
```html
<template>
<div>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
:row-key="row => row.id"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="id"
label="ID">
</el-table-column>
<el-table-column
prop="name"
label="Name">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Tom' },
{ id: 4, name: 'Alice' }
],
selectedIndexes: []
};
},
methods: {
handleSelectionChange(selection) {
this.selectedIndexes = selection.map(item => this.tableData.indexOf(item));
}
}
};
</script>
```
在上面的示例中,`tableData`是您的表格数据数组,`selectedIndexes`是选中数据的索引数组。在`handleSelectionChange`方法中,我们使用`map`方法遍历选择的数据数组,并通过`indexOf`方法获取每个选择数据在原数据数组中的索引,并将其添加到`selectedIndexes`数组中。
这样,您就可以通过`selectedIndexes`数组获取选择数据的序号了。
阅读全文