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方法是对月份展示的一个处理,这样就可以正确输出数据了