效果圖
話不多說，直接擼代碼
1 <el-table 2 ref="multipleTable" 3 :data="tableData" 4 tooltip-effect="dark" 5 style="width: 100%" 6 :height="kc_table_height" 7 class="eltable" 8 border 9 v-loading="loading" 10 @selection-change="handleSelectionChange" 11 > 12 <div slot="empty" class="kc_table_empty">暫無數據</div> 13 <el-table-column type="selection" align="center" fixed width="55"> </el-table-column> 14 <el-table-column type="index" align="center" label="序號" fixed width="55"> 15 </el-table-column> 16 <template v-for="item in budgetReportList"> 17 <el-table-column 18 v-if="item.children" 19 align="center" 20 :prop="item.value" 21 :min-width="item.width" 22 :label="item.label" 23 show-overflow-tooltip 24 > 25 <el-table-column 26 align="center" 27 v-for="col in item.children" 28 :key="col.value" 29 :prop="col.value" 30 :min-width="col.width" 31 :label="col.label" 32 show-overflow-tooltip 33 > 34 <template slot-scope="scope"> 35 <span>{{ scope.row[col.value] }}</span> 36 </template> 37 </el-table-column> 38 </el-table-column> 39 <el-table-column 40 v-else 41 fixed 42 align="center" 43 :prop="item.value" 44 :min-width="item.width" 45 :label="item.label" 46 show-overflow-tooltip 47 > 48 <template slot-scope="scope"> 49 <span>{{ scope.row[item.value] }}</span> 50 </template> 51 </el-table-column> 52 </template> 53 </el-table>
實現思路：
首先表頭，包含着兩種，一級和二級表頭。
for循環遍歷tabHeader，如果list為空則是一級表頭，只需要顯示value即可。
如果list有數據，則需要再次遍歷list。
接着是內容的數據，是按照每行的每一個格子都放到一個數組里面，每一行的數據又放到一個數組里。最終顯示的時候只需要對應每個格子的rowIndex和columnIndex來設置tableData中的數據就OK。
發現二級表頭的數據對應不上，需要給tabHeader做下處理，將tabHeader的表頭數據從左到右依次排序，拿到數據源后，遍歷，給value同級增加一個index字段，如果list不為空則index依次增加，最終根據這個index取tableData的值。