接口获取的数组,回显到表格,多选框选中
时间: 2024-01-13 21:02:49 浏览: 27
获取到接口返回的数组后,可以将其绑定到 `el-table` 的 `data` 属性上,以便将数据回显到表格中。对于多选框选中的问题,可以在获取到数据后,遍历数组将每个对象的 `selected` 属性设置为 `true` 或 `false`,然后将其绑定到表格的 `row-key` 属性上,这样就可以实现多选框的选中状态回显。
以下是一个示例代码:
```
<template>
<el-table :data="tableData" :row-key="row => row.id" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [],
selectedRows: []
};
},
methods: {
fetchData() {
// 获取接口数据
// 假设接口返回的数据格式为 [{ id, name, age, gender, selected }]
// 设置 selected 属性,用来回显多选框的选中状态
const data = [{ id: 1, name: '张三', age: 18, gender: '男', selected: true }, { id: 2, name: '李四', age: 20, gender: '女', selected: false }];
this.tableData = data;
},
handleSelectionChange(selection) {
this.selectedRows = selection;
}
},
mounted() {
this.fetchData();
}
};
</script>
```
在上面的代码中,我们将接口返回的数据绑定到 `tableData` 属性上,并设置了 `row-key` 属性来指定表格每行数据的唯一标识符。在 `handleSelectionChange` 方法中,我们可以获取当前选中的行数据,并将其保存到 `selectedRows` 数组中。