效果圖

話不多說，直接擼程式碼

 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的值。

作者：時來運轉
大佬們好，我是Web前端菜鳥，初來乍到，想跟諸位共同學習成長；
綜上是我每日閒時整理筆記，文章如有侵權請諸位及時告知我，謝謝關照！