vue element表格动态表头、动态列,---难啊难

参考文档 = https://blog.csdn.net/Feast_aw/article/details/97276682

<template>
  <div>
    <el-table
      v-if="tableInfo.length"
      :data="tableInfo[0].dataList"
      border
      style="width: 100%;"
      class="table-info bgf"
      header-row-class-name="lm-header-row"
      cell-class-name="lm-cell"
      empty-text="还没有数据哦～"
      tooltip-effect="dark"
    >
      <el-table-column
        type="index"
        label="学期"
        style="width: 100%;"
      />
      <template v-for="(item, index) in tableInfo">
        <el-table-column
          :key="index"
          :label="item.columnName">
          <template slot-scope="scope">
            <div>{{ item.dataList[scope.$index] && item.dataList[scope.$index].teachingArrangementData }}</div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-table v-else empty-text="还没有数据哦～"/>
  </div>
</template>

data () {
    return {
      tableInfo: [
        {title: '指标', isshow: true,
          detail: ['到课率', '完成度', '答题率', '答题正确率', '直播课作业正确率', '视频作业正确率', '综合课作业正确率']},
        {title: '讲次1', isshow: true, detail: ['1', '2', '3', '4', '5', '6', '7']},
        {title: '讲次2', isshow: true, detail: ['11', '12', '13', '14', '15', '16', '17']},
        {title: '讲次3', isshow: true, detail: ['21', '22', '23', '24', '25', '26', '27']},
      ],
      search: {
        name: '',
        time: '',
      },
      currentPage: 1,
      pageCount: 0,
      pageSize: 10,
      pageSizes: [10, 20, 30, 50],
      totalCount: 0,
    };
  }
}