el-table 懒加载

近期遇到的问题：使用el-table展示数据，数据量很大，不能使用分页，一次性加载数据，界面要卡顿十几秒，对此，做了数据展示优化。 基本思路：使用数据懒加载，每次界面只渲染可视范围内的数据，随着滚动条滑动，渲染新的数据。

html部分：

<div class="aj-con-item-box">
  <el-table :data="visiblejiaolu1JiCe" border style="width: 100% " height="100%" class="aj-con-item-box-aj"
    ref="multipleTable1">
    <el-table-column label="" width="120" fixed>
      <template slot="header" slot-scope="scope">
        <div class="dan-box">日期</div>
      </template>
      <template slot-scope="scope">
        <!-- <i class="el-icon-time"></i> -->
        <span class="dan-box" style="background: initial;font-size: 14px;">{{ scope.row.timestamp }}</span>
      </template>
    </el-table-column>
  </el-table>
</div>

js部分：

export default {
  data() {
    return {
      jiaolu1JiCe: [],
      pageSize:20,
      curStartIndex:0,
      curEndIndex: 20,
    }
  },
  computed: {
    visiblejiaolu1JiCe(){
      return this.jiaolu1JiCe.filter((_item, index) => {
        if (index < this.curStartIndex) {
          return false;
        } else if (index > this.curEndIndex) {
          return false;
        } else {
          return true;
        }
      })
    }
  },
  
  mounted() {
    this.getData();
    window.addEventListener('scroll', this.handleScroll, true)
  },
  
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  
  methods: {
    handleScroll(){
      let scrollTop = document.getElementsByClassName('aj-con-item-box').scrollTop;
      //此时的开始索引
      this.curStartIndex = Math.floor(scrollTop/this.pageSize)
      if(this.curStartIndex < 0) this.curStartIndex = 0
      //此时的结束索引
      this.curEndIndex = this.curStartIndex + this.pageSize
    },
     getDataList() {
      let data = {}
      if (this.startTime !== "" ) {
        data = {
          params: this.chaxun,
          time: this.chuxunyear,
        }
      }
      getHuoDaoCeWenJiaoZhunList1(data).then(res => {
          if(this.jiaolu1JiCe){
            this.jiaolu1JiCe = [];
          }
          const arr = [];
          res.data.forEach((item, index) => {
            const newObj = {
              timestamp: item.timestamp_zx1,
              avg: parseFloat(item.avg_1_ji).toFixed(2),
              list: {}
            }
            for (let key in item) {
              if (key.includes('TE') ) {//TE
                newObj['list'][key] = Math.round(parseFloat(item[key]));
              }
            }
            arr.push(newObj);
          })
          const jiceList = [];
          arr.forEach(item => {
            const newObj1 = {
              timestamp: item.timestamp,//.substring(0,10)
              avg: item.avg,
              list: []
            }
            Object.keys(this.objSort(item.list)).forEach((key, index) => {
              const value = item.list[key];
              if (index + 1 <= 66) {
                newObj1.list.push({
                  label: key,
                  value: value,
                  //AVG_JI: item.list[NaN]
                })
              } 
            });
            jiceList.push(newObj1);
          })
          this.jiaolu1JiCe = jiceList;
          this.$nextTick(() => {
            this.$refs.multipleTable1.doLayout();// el-table加ref="multipleTable1"
          });
        })
    }
  }
}