vue element表格动态表头、动态列

<span v-click-outside="hideChoose" class="icon-choose fr pointer mr10" @click="showChoose">
        <div v-show="isChooseCols" class="cols-choose-list">
          <el-checkbox :key="index" v-model="item.isshow" :label="item.title" v-for="(item, index) in tableData" />
        </div>
      </span>
    
<el-table
        :data="tableData[0].detail"
        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="序号"
          width="70"/>
        <template v-for="(item, index) in tableData">
          <el-table-column
            :key="index"
            :label="item.title"
            v-if="item.isshow">
            <template slot-scope="scope">
              <div>{{ item.detail[scope.$index] }}</div>
            </template>
          </el-table-column>
        </template>
      </el-table>

 

data () {
    return {
      isChooseCols: false,
      tableData: [
        {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,
    };
  },

methods：{
    // 控制表格头部哪些显示哪些不显示
    showChoose () {
      this.isChooseCols = true;
    },
    hideChoose () {
      this.isChooseCols = false;
    },
}

效果图（css就不写了，有公共的，比较麻烦）