element 復雜的多級表頭和數據處理

設計圖

需求

根據推廣渠道后端返回一個推廣人員對應的一個或多個渠道信息；

后端返回數據結構

這里的volist是一個或多個；

解決思路

首先實現的效果用到element-ui的多級表頭，即el-table-column 里面嵌套 el-table-column

這里合計、百度、搜狗。。。對應的數據參數是一定的。每個對應6個參數。

所以要先知道一個人對應的有幾個渠道作為最外層遍歷，內層是固定的6個參數的循環。最終拿到表格對應的數據。

1.data定義變量

      //tableName里面的東西是固定的
  tableName:[{name:'有效對話',key:'validSum'},
              {name:'對話占比' ,key:'validPercent'},
              {name:'獲取手機',key:'getMobileSum'},
              {name:'獲取率',key:'getMobilePercent'},
              {name:'資源成單',key:'placeOrderSum'},
              {name:'成單率',key:'placeOrderPercent'}],
  tableTitle:[]

2. 數據的處理

         if (data && data.code === 0) {
                let tableTit = data.data.resultList[0].voList;
                let originAcount = data.data.resultList[0].voList.length;
                for(let i=0;i<originAcount;i++){
                    this.tableTitle.push(tableTit[i].channelStr) ;
                }
                
                this.tableData = data.data.resultList
                this.totalCount = data.data.total;
                this.loading = false
            }

3.表頭的使用

 <el-table :data="tableData" style="width: 100%" border v-loading="loading">
              <el-table-column v-if="tableData.length!=0"
                label="推廣人員"
                prop="tgUserStr"
                width="100"
                align="center"
              >
               </el-table-column>
             <template v-for="(a,p) in tableTitle">
              <el-table-column :label="a" :key="a">
                    <template v-for="col in tableName">
                      <el-table-column
                      :label="col.name"
                      :key="col.key"
                      width="100"
                      align="center"
                  >
                      <template slot-scope="scope">
                          <span>
                              {{scope.row.voList[p][col.key]}}
                          </span>
                      </template>
                   </el-table-column>
                 </template>
              </el-table-column>
            </template>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         -->
    </el-table>