element el-table 日期動態做表頭table_header，並實現左右分頁處理

實現的效果圖：

類似這種就需要日期去做表頭，不能一貫使用思維去使用table去處理，很費時費力。
由於本項目基於element，所以第一想法就是使用element中的el-table組件，然發現裏面的demo只有一些簡單的，無法滿足；所以想到度娘尋求幫助，故在此做個記錄。
不多說，直接上代碼
html部分：

// 這裏dateArr只處理日期和星期table_header部分，前面兩個el-table-column自行補充啦
// :render-header是處理表頭日期的分頁處理
<el-table-column align="center" v-for="(item,index) in dateArr" :key="index + item" :label="item" :render-header="renderHeader">
          <template slot-scope="scope">
            <div v-if="scope.row.lists">
            	// 這裏處理tbody部分
            </div>
           </template>
</el-table-column>

js部分：

	dataList: [],      // 數據列表
    typeNameArr: [],  // 第一列進行合併操作時存放的數組變量
    typeNamePos: 0, // 上面的數組的下標值
    TempleftDate: "",
    TemprightDate: "",
    TempleftDate_: "",   // yy/MM/dd
    TemprightDate_: "",
    dateArr: [],


  // 表頭添加左右圖標
  renderHeader(h,{column}) {
      if (column.label == this.TempleftDate && this.datetimeparse(new Date().getTime(), 'yy/MM/dd') != this.TempleftDate_ ) {
          return h(
              'div',
              [
                  h('i', {
                      class: 'el-icon-arrow-left',
                      style: 'color:#409eff;margin-right:5px; cursor: pointer;',
                      on:{
                          click: ($event, column) => this.leftRightLable($event, column, -7),
                      }
                  }),
                  h('span', column.label)
              ],
          );
      }else if (column.label == this.TemprightDate) {
          return h(
              'div',
              [
                  h('span', column.label),
                  h('i', {
                      class: 'el-icon-arrow-right',
                      style: 'color:#409eff;margin-left:5px;cursor: pointer;',
                      on:{
                          click: ($event, column) => this.leftRightLable($event, column, 7),
                      }
                  })
              ],
          );
      }else {
          return h(
              'div',
              [
                  h('span', column.label),
              ],
          );
      }
  },

  // 向右或者向左更該日期
  leftRightLable(obj, $event, num) {
      console.log('obj', obj);
      console.log('$event', $event);
      console.log('num', num);
      if (num > 0) {
          this.currentPage++;
      }else {
          this.currentPage--;
      }
      this.get_date(this.fun_date(this.TempleftDate_, num), 6);
  },


	
  // 獲取前七天或者後七天的日期
  fun_date(datestr, num) {
      var date1 = new Date(datestr);
      //今天時間
      var time1 = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate();
      console.log(time1);
      var date2 = new Date(date1);
      date2.setDate(date1.getDate() + num);
      //num是正數表示之後的時間，num負數表示之前的時間，0表示今天
      let month = date2.getMonth() + 1;
      if (month < 10) {
          month = '0' + month;
      }
      let day = date2.getDate();
      if (day < 10) {
          day = '0' + day;
      }
      var time2 = date2.getFullYear() + "/" + month + "/" + day;
      console.log(time2);
      return time2;
  },

  // 獲取7天日期包含週末
  get_date(date, num) {
       let date_ = this.fun_date(date, num);  // 獲取七天後或者七天前
       this.dateArr = this.getBetweenDateList(date, date_);
       console.log('this.dateArr', this.dateArr);
       this.TempleftDate = this.dateArr[0]; // 該區間日期第一位
       this.TempleftDate_ = date;
       this.TemprightDate_ = date_;
       console.log('this.TempleftDate_', this.TempleftDate_);
       console.log('this.TempleftDate_', this.TemprightDate_);
       this.timeArr.push(new Date(new Date(date).toLocaleDateString()), new Date(new Date(date_).toLocaleDateString()));
       this.TemprightDate = this.dateArr[this.dateArr.length - 1]; // 該區間日期最後一位
       this.getList();   // 數據請求封裝函數
   },

	// 下面是合併第一列
	// 表合併
    merageInit() {
        this.typeNameArr = [];
        this.typeNamePos = 0;
    },
    merage() {
        this.merageInit();
        for (let i = 0; i < this.dataList.length; i += 1) {
            if (i === 0) {
                // 第一行必須存在
                this.typeNameArr.push(1);
                this.typeNamePos = 0;
            } else {
                // 判斷當前元素與上一個元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序號
                // 第一列
                // eslint-disable-next-line no-lonely-if
                if (this.dataList[i].roomTypeName === this.dataList[i - 1].roomTypeName) {
                    this.typeNameArr[this.typeNamePos] += 1;
                    this.typeNameArr.push(0);
                } else {
                    this.typeNameArr.push(1);
                    this.typeNamePos = i;
                }
            }
        }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
            // 第一列的合併方法
            const row1 = this.typeNameArr[rowIndex];
            const col1 = row1 > 0 ? 1 : 0; // 如果被合併了row = 0; 則他這個列需要取消
            return {
                rowspan: row1,
                colspan: col1,
            };
        }
    },