后端传过来一个对象,前端使用elmentui 应该怎么赋值给table表单?
时间: 2024-05-15 14:14:21 浏览: 91
如果你想要将后端返回的对象赋值给 ElementUI 的表格组件,你需要先将后端返回的对象转换成 ElementUI 表格所需要的格式。
ElementUI 表格组件要求数据源是一个数组,数组中的每个元素是一个对象,对象的 key 对应表格的列名,value 对应表格中每一行的数据。
下面是一个示例代码,假设后端返回的对象为 `data`,表格有两列,分别为 `name` 和 `age`,表格组件绑定的数据为 `tableData`:
```javascript
<template>
<el-table :data="tableData">
<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: []
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
// 调用后端接口获取数据
api.getData().then(response => {
// 将后端返回的对象转换成 ElementUI 表格所需要的格式
const data = response.data.map(item => {
return {
name: item.name,
age: item.age
}
})
// 将转换后的数据赋值给 tableData
this.tableData = data
})
}
}
}
</script>
```
这样,当 `tableData` 被赋值后,表格会自动渲染出数据。
阅读全文