element table 合并同类项并输出后台返回数据

table的样式如下

 后台返回的数据格式是按照横着来的,因为表头是经过处理的,而且是作为独立出来的数据返给前端的,所以当我们进行数据填充的时候需要用到后台返回的完整的数据,要想一一对应的话,我们需要进行一下转化,转化方式如下:

res.content.data.map(it = > {
    it.dataList.map((item, i) = > {
        it[item.month + item.year] = item.indexValue;
    });
});

将indexValue对应的值,赋值给一个新的变量,为了保证变量的唯一性,就将月份和年份加在一起,保证其唯一性,然后再页面中的输出是这样的:

<el-table-column
  class-name="right-money"
  v-for="(item,index) in colDefList"
  min-width="84"
  :key="index"
  :label="item.year + '年'"
>
  <template>
    <el-table-column
      width="140"
      :key="index"
      v-for="(it, index) in item.origin"
      :label="changeValue(it.month)"
      :prop="it.month + it.year"
    ></el-table-column>
  </template>
</el-table-column>
changeValue方法是对月份展示的一个处理,这样就可以正确输出数据了
原文地址:https://www.cnblogs.com/florazeng/p/14041156.html