vue + element-ui实现动态多级表头

项目中需求为实现一个列表，表头动态不固定，并且可能包含一级表头以及二级表头。

先上效果图

实现思路：

首先表头，包含着两种，一级和二级表头。后台接口返回的表头数据格式：

[

    {"value":"组织编码","list":[]},

    {"value":"组织名称","list":[]},

    {"value":"大区指标4（数值）","list":["考核项目4（百分比平均）(目标)","考核项目4（百分比平均）(达       成)","指标结果"]}

]

for循环遍历tabHeader，如果list为空则是一级表头，只需要显示value即可。

如果list有数据，则需要再次遍历list。

template代码：

      :data="tableData"

      border

      ref="multipleTable"

      style="width: 100%;"

      size="small"

      :empty-text="$t('83WV56')"

    >

     

   

   

      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。