处理table数据，将后台返回的数据把列变成行，并且某列的数据一样的进行合并,动态表头

如果后台返回的数据是按列返回，而el-table渲染的数据是按行进行渲染的，所以需要将后台的数据进行一下转换,并且把某列的数据一样进行合并。如下图所示下边是后台返回的数据

 

代码如下

<el-table :data="tableList"
    border
    :span-method="arraySpanMethod"
    height="100%" 
    size="mini">
    <!-- <el-table-column label="名称" width="180">
          <template slot-scope="scope">
               {{ scope.$index == 0 ? '期初资金' : (scope.row.project_name == '2固定费用' || scope.row.project_name == '2变动费用'|| scope.row.project_name == '支出合计') ? '支出' :scope.$index == 15 ? '期末资金' : scope.$index == 16 ?'收支差' : '收入' }}
           </template>
     </el-table-column> -->
     <el-table-column prop="name" label="名称" width="180"></el-table-column>
     <el-table-column prop="project_name" label="资金项目" width="180"></el-table-column>
     <el-table-column v-for="item in headerList" :key="item.key"
                                    :prop="item.key" :label="item.text" width="180"></el-table-column>
     <el-table-column prop="totalAmount" label="合计" width="180"></el-table-column>
</el-table>

data: function () {
     return {
        tableList: [], //列表数据
        headerList: [],
        spanArr:[],
        pos:0
     }
},

arraySpanMethod({ row, column, rowIndex, columnIndex }){
    if (columnIndex === 0) {    //如果是第一列
        const _row = this.spanArr[rowIndex];   //将每一行传入上述方法，获取到每一行的合并行数
        const _col = _row > 0 ? 1 : 0;
        return {
            rowspan: _row,   //合并行
            colspan: _col    //合并列
        }
     }
},
//获取数据
getData() {
    let routerMessage = this.routerMessage;
    this.$post({
         url: "normalProcess",
         optype: routerMessage.optype,
         params: routerMessage.params
    }).then(result => {
         let data = result.data;
         // 获取左侧资金项目
                   
         // let projectList = Object.keys(data.rec);
         let projectList = [];
         let tableList = [];
         let headerList = [];
         data.rec.map(item =>{
              projectList.push(Object.keys(item)[0]);
         })
         data.list.forEach(dataItem => {
              headerList.push({
                  key: dataItem.acc_id + "_header",
                  text: dataItem.acc_short_name
              });
         });
         this.headerList = headerList;
         projectList.forEach((item,index) => {
              let showItem = {
                   project_name: data.rec[index][item],
                   totalAmount : 0,
              }
              data.list.forEach(dataItem => {
                   showItem[dataItem.acc_id + "_header"] = dataItem[item];
                   showItem.totalAmount += dataItem[item];
              });
              showItem.totalAmount = showItem.totalAmount.toFixed(2);
              tableList.push(showItem);
              tableList.forEach((subItem,index) => {
                  if(index == 0){
                      subItem.name = '期初资金'
                  }else if(index > 0 && index < 12){
                      subItem.name = '收入'
                  }else if(index > 11 && index < 15){
                      subItem.name = '支出'
                  }else if(index == 16){
                      subItem.name = '期末资金'
                  }else{
                      subItem.name = '收支差'
               } 
            })
         });
         this.tableList = tableList;
         this.getSpanArr(this.tableList)
     });
},