解决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 代码：

  
  
  

    
      
        
      
      
        
      
    
  

  
    
  



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;
    }
  },
}