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

效果图

话不多说，直接撸代码

          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :height="kc_table_height"
            class="eltable"
            border
            v-loading="loading"
            @selection-change="handleSelectionChange"
          >
            <div slot="empty" class="kc_table_empty">暂无数据</div>
            <el-table-column type="selection" align="center" fixed width="55"> </el-table-column>
            <el-table-column type="index" align="center" label="序号" fixed width="55">
            </el-table-column>
            <template v-for="item in budgetReportList">
              <el-table-column
                v-if="item.children"
                align="center"
                :prop="item.value"
                :min-width="item.width"
                :label="item.label"
                show-overflow-tooltip
              >
                <el-table-column
                  align="center"
                  v-for="col in item.children"
                  :key="col.value"
                  :prop="col.value"
                  :min-width="col.width"
                  :label="col.label"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row[col.value] }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column
                v-else
                fixed
                align="center"
                :prop="item.value"
                :min-width="item.width"
                :label="item.label"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row[item.value] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>

实现思路：

首先表头，包含着两种，一级和二级表头。

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

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

接着是内容的数据，是按照每行的每一个格子都放到一个数组里面，每一行的数据又放到一个数组里。最终显示的时候只需要对应每个格子的rowIndex和columnIndex来设置tableData中的数据就OK。

发现二级表头的数据对应不上，需要给tabHeader做下处理，将tabHeader的表头数据从左到右依次排序，拿到数据源后，遍历，给value同级增加一个index字段，如果list不为空则index依次增加，最终根据这个index取tableData的值。