用<el-table-column渲染后端传过来的对象
时间: 2023-10-28 17:08:08 浏览: 140
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
可以通过在`<el-table>`中使用`<el-table-column>`来渲染后端传过来的对象。
例如,假设后端返回的数据包含`id`、`name`和`age`字段。使用以下代码可以将这些字段渲染到表格中:
```html
<el-table :data="tableData">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
```
其中,`:data`指定表格的数据源,`prop`指定要渲染的字段名,`label`指定表头的文本。
如果后端返回的数据是一个对象数组,则可以直接将其赋值给`tableData`,例如:
```javascript
data() {
return {
tableData: [
{ id: 1, name: 'Alice', age: 20 },
{ id: 2, name: 'Bob', age: 25 },
{ id: 3, name: 'Charlie', age: 30 },
]
}
}
```
这样就可以将表格渲染出来了。
阅读全文