效果图
话不多说，直接撸代码
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的值。