前端 自定义table表格内容

不废话上代码之【自定义table表格内容】 

样式 

<div style=" ;width: 50%;height:300px;">
  <template>
    <el-table style="width: 90%;margin: auto;" height="250" border :data="mapTab">
      <el-table-column v-for="(item,index) in mapTab[0]" v-if="mapTab.length>0 " :label="index" align="center" :prop="index"/>
    </el-table>
  </template>
</div> 

数据格式

listAll: [{
  '时间': '06-19',
  '20L': '10',
  '30L': '10'
}, {
  '时间': '06-20',
  '20L': '10',
  '30L': '10'
}]

后端

//表格形式
List<Map> cardMapVOList = new ArrayList<>();
for (DateTime time : dateTime) {
    LinkedHashMap<String, Object> mapTab = new LinkedHashMap<>();
    mapTab.put("日期", DateUtil.formatDateTime(time).substring(5, 10));
    for (Integer faceValue2 : intFaceValue) {
        Integer num = xcxCardMapper.sechartStatistics(type, faceValue2, time);
        mapTab.put(faceValue2+"L",num+"元");
    }
    cardMapVOList.add(mapTab);
}