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

 

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就不写了，有公共的，比较麻烦）