后端返回一个对象数组格式的,我怎么把他给elemplentui表格赋值多个字段
时间: 2023-06-15 08:04:45 浏览: 58
如果你想将后端返回的对象数组赋值给 Element UI 表格的多个字段,可以使用 Element UI 的 `table-column` 组件来定义每个列的属性。每个 `table-column` 组件可以设置一个 `prop` 属性,用于指定从数据源中读取数据的属性名称,然后将数据渲染到表格中的相应列。
例如,假设后端返回的数据格式如下:
```js
[
{ id: 1, name: 'Alice', age: 20 },
{ id: 2, name: 'Bob', age: 25 },
{ id: 3, name: 'Charlie', age: 30 }
]
```
你可以在模板中定义一个表格,并为每个列定义一个 `table-column` 组件,如下所示:
```html
<template>
<el-table :data="tableData">
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
</template>
```
在这个例子中,我们为表格定义了三个列,分别是编号、姓名和年龄。每个 `table-column` 组件的 `prop` 属性分别设置为 `id`、`name` 和 `age`,这对应了数据源中的三个属性。
最后,我们将数据源绑定到表格的 `data` 属性上即可:
```js
export default {
data() {
return {
tableData: []
}
},
mounted() {
// 请求后端数据
axios.get('/api/users').then(response => {
this.tableData = response.data
})
}
}
```
这样就可以将后端返回的对象数组赋值给 Element UI 表格的多个字段了。