项目中需求为实现一个列表，表头动态不固定，并且可能包含一级表头以及二级表头。
先上效果图
实现思路：
首先表头，包含着两种，一级和二级表头。后台接口返回的表头数据格式：
[
{"value":"组织编码","list":[]},
{"value":"组织名称","list":[]},
{"value":"大区指标4（数值）","list":["考核项目4（百分比平均）(目标)","考核项目4（百分比平均）(达 成)","指标结果"]}
]
for循环遍历tabHeader，如果list为空则是一级表头，只需要显示value即可。
如果list有数据，则需要再次遍历list。
template代码：
<el-table
:data="tableData"
border
ref="multipleTable"
style="width: 100%;"
size="small"
:empty-text="$t('83WV56')"
>
<template v-for="(item, headerIndex) in tableHeader">
<el-table-column
v-if="
!item.indicatorList ||
(item.indicatorList && item.indicatorList.length == 0)
"
:key="headerIndex"
:label="item.value"
:fixed="headerIndex < 2"
>
<template slot-scope="scope">
<span>
{{ tableData[scope.$index][headerIndex].value || '' }}
<span
v-if="
tableData[scope.$index][headerIndex] &&
tableData[scope.$index][headerIndex].indicatorId
"
class="el-icon-edit name"
@click="editFlag(scope.$index, headerIndex)"
/>
</span>
</template>
</el-table-column>
<el-table-column v-else :key="headerIndex" :label="item.value">
<el-table-column
v-for="(indicator, subKey) in item.indicatorList"
:key="subKey"
:label="indicator.name"
>
<template slot-scope="scope">
<span
:class="{
'danger-hint':
tableData[scope.$index][indicator.index] &&
tableData[scope.$index][indicator.index].dataError
}"
>
{{ getValue(tableData[scope.$index][indicator.index]) }}
<span
v-if="
tableData[scope.$index][indicator.index] &&
tableData[scope.$index][indicator.index].indicatorId
"
class="el-icon-edit name"
@click="editFlag(scope.$index, indicator.index)"
/>
<el-tooltip
effect="light"
placement="top"
:content="$t('EVIST7')"
>
<i
class="el-icon-warning danger-hint"
v-if="
tableData[scope.$index][indicator.index] &&
tableData[scope.$index][indicator.index].dataError
"
/>
</el-tooltip>
</span>
</template>
</el-table-column>
</el-table-column>
</template>
</el-table>
<el-pagination
v-if="dataTotal > 0"
class="pages-pagination"
:page-sizes="[10, 30, 50, 100]"
:page-size="limit"
:total="dataTotal"
:current-page="currentPage"
layout="total, sizes, prev, pager, next, jumper"
@size-change="sizeChange"
@current-change="currentChange"
/>
接着是内容的数据，是按照每行的每一个格子都放到一个数组里面，每一行的数据又放到一个数组里。最终显示的时候只需要对应每个格子的rowIndex和columnIndex来设置tableData中的数据就OK。
发现二级表头的数据对应不上，需要给tabHeader做下处理，将tabHeader的表头数据从左到右依次排序，拿到数据源后，遍历，给value同级增加一个index字段，如果list不为空则index依次增加，最终根据这个index取tableData的值。
设置的内容的时候 tableData[scope.$index][columnIndex].value
scope.$index 是行index，columnIndex是每个格子的列Index。
