vue element-ui动态横向统计表格
表格结构 <el-table :data="AllData" style="width: 100%"> <el-table-column prop="title" label="统计"> </el-table-column> <el-table-column v-for="(item,index) in allList" :prop="item.key" :key="index" :label="item.feeName"> </el-table-column> <el-table-column prop="join" label="合计"> </el-table-column> </el-table> data AllData:[], allList:[], methods: setData(){ //这里请求后台的统计信息,合计可以在我这里进行运算 var getData = [ { title:'未入账', data:[ { feeName:'考试费1', num:2001, }, { feeName:'考试费2', num:2002, }, { feeName:'考试费3', num:2003, }, { feeName:'考试费4', num:2004, } ] } ] for (var i in getData){ var a = {} var b = [] a['title'] = getData[i].title var x = 0 var join = 0 getData[i].data.forEach(function (e){ x+=1 join+=e.num b.push({feeName:e.feeName,key:'num'+x}) a['num'+x] = e.num a['join'] = join }) this.AllData.push(a) this.allList = b } }, 请求到 getData这个json之后就组建新的对象 created(){ this.setData() }, 最后上效果图…
![](https://img2020.cnblogs.com/blog/1581117/202201/1581117-20220112140927259-779979897.png)
附: 如果增加下面图中json对象的对应数据,表格可以横轴纵轴增加数据