table 数据多横向滚动

需求:数据量大，页面处理逻辑太多，对当前页面做一个类似走马灯得效果，只展示当前页面能看到得数据。

横向数据过多得时候，隐藏底部滚动条，进行自定义

<el-table
     ref="bookTable"
     :data="tableData"
     :header-cell-style="{ color: '#333' }"
     :max-height="maxHeight + 'px'"
     :span-method="spanMethod"
     :row-class-name="tableRowClassName"
     :class="{ 'hidden-scroll': periodRanges.length > 62 }"
   >
  </el-table>
  
  
   <div v-if="periodRanges.length > 62" @scroll="onScroll" class="scrollOut">
     <div
       id="scrollBar"
       :style="{ width: periodRanges.length * 136 + 660 + 'px' }"
     >
       滚动
     </div>
   </div>

// js

   pageList: 30, //一页能展示几个
   numPeriod: 0, //滚动第几页
   sliceStart: 0, //截取得开始
   scrollLeft: 0, //滚动距离右部得距离
   periodRanges:[], //全部数据
   filterPeriodRanges: [], //当中展示得截取段
   
 //滚动增加监听
 onScroll(event) {
   let numberOfPages = Math.round(event.target.scrollLeft / 136);
   if (numberOfPages == this.numPeriod) return;
   this.numPeriod = numberOfPages;

   let start = Math.min(
     numberOfPages,
     this.periodRanges.length - this.pageList
   );
   this.filterPeriodRanges = this.periodRanges.slice(
     start,
     start + this.pageList
   );
   
   this.$refs.bookTable.doLayout(); //重新渲染表格
 },