前端 element-UI table的多选id如何获得
时间: 2023-06-02 12:07:21 浏览: 61
你可以使用以下代码来获取 element-UI table 多选的 id:
```
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="Age"
width="180">
</el-table-column>
</el-table>
<button @click="getIds">Get Selected Ids</button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
name: 'John',
age: 20
},
{
id: 2,
name: 'Mike',
age: 25
},
{
id: 3,
name: 'Amy',
age: 30
}
],
selectedIds: []
}
},
methods: {
getIds() {
this.selectedIds = this.$refs.table.selection.map(item => item.id)
console.log(this.selectedIds)
}
}
}
</script>
```
在这个例子中,我们使用 `$refs.table.selection` 来获取所有选中的行,然后通过映射函数获取每个选中行的 `id` 值,并将它们存储在 `selectedIds` 中。