页面展示从接口获取的数据到 table 里面,包括表头和表数据
html代码
<el-table :data="tableList" border size="mini">
<template v-for="(item,index) in tableHead">
<el-table-column :prop="item.name" :label="item.label" :key="index"></el-table-column>
</template>
</el-table>
接口获取的数据
this.tableHead = [
{
name: "id",label:"ID"},
{
name: "name",label:"名称"},
{
name: "type",label:"类型"},
{
name: "status",label:"状态"}
],
this.compareList = [{
id: '1',
name:'test1',
type: '自定义',
status: 'SUCCESS'
},
{
id: '2',
name:'test2',
type: '自定义',
status: 'RUNNING'
},
{
id: '3',
name:'test3',
type: '自定义',
status: 'FAILED'
}]
展示结果: