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

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

先上效果图

实现思路：

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

[

    {"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。