vue ElementUI table 组件动态表头

页面展示从接口获取的数据到 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'
}]

展示结果:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43299180/article/details/112542663