解决el-table 循环对象集合的做法，动态多层表头，

效果：

 

 

 

后端返回的数据结构：

  record: {
  data: [
    {
      list: [
        {
          indexName: "地方补贴1",
          indexCode: null,
          typeName: "--",
          typeCode: null,
          submitValue: null,
          submitVersion: null,
          typeUpLimit: null,
          typeLowLimit: null
        },
        {
          indexName: "地方补贴2",
          indexCode: null,
          typeName: "--",
          typeCode: null,
          submitValue: null,
          submitVersion: null,
          typeUpLimit: null,
          typeLowLimit: null
        },
      ],
      queryTime: "2021-03-01",
      kpiManageArea: "甘肃",
      kpiManageId: 42
    },
    {
      list: [
        {
          indexName: "地方补贴1",
          indexCode: null,
          typeName: "--",
          typeCode: null,
          submitValue: null,
          submitVersion: null,
          typeUpLimit: null,
          typeLowLimit: null
        },
        {
          indexName: "地方补贴2",
          indexCode: null,
          typeName: "--",
          typeCode: null,
          submitValue: null,
          submitVersion: null,
          typeUpLimit: null,
          typeLowLimit: null
        },
      ],
      queryTime: "2021-03-02",
      kpiManageArea: "甘肃",
      kpiManageId: 42
    }
  ],
    header: [
    "地方补贴1",
    "地方补贴2",
    "地方补贴3",
  ]
}

vue 代码：

<el-table :data="table">
  <el-table-column prop="queryTime" label="日期" width="120" fixed></el-table-column>
  <el-table-column prop="kpiManageArea" label="管理区" width="100" fixed></el-table-column>
  <div v-for="(item,index) in header" :key="index">
    <el-table-column :label="item" >
      <el-table-column label="录入方式">
        <template slot-scope="scope">
          {{ getTypeName(scope.row, index) }}
        </template>
      </el-table-column>
      <el-table-column label="数值">
        <template slot-scope="scope">
        {{ getSubmitValue(scope.row, index) }}
        </template>
      </el-table-column>
    </el-table-column>
  </div>
  <el-table-column fixed="right" label="操作" width="100">
    <template slot-scope="scope">
      <el-button @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
      <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
    </template>
  </el-table-column>
</el-table>


script:

methods: {
  getSubmitValue(row,index){
    debugger
    if(row.list == null || row.list.length < index){
      return null;
    } else {
      return row.list[index].submitValue;
    }
  },
  getTypeName(row,index){
    debugger
    if(row.list == null || row.list.length < index){
      return null;
    } else {
      return row.list[index].typeName;
    }
  },
}