场景

家喻户晓，iview的table组件，若数据量大的时候，table组件渲染很慢。为了优化初始化table的工夫， 不得不做一下优化。

因为，业务需要的起因，此数据表是一个主数据表，不可应用分页....

所以只能乖乖的做一下前端的懒加载（也就是分页）

思路

很简略，这里利用二维数组。定义好每个二维数组里要存的个数，而后去保护这个二维数组的下标即可。
申明一个变量: len ， 代表接口失去的数组长度

  • 每个子数组存入的数量 => len/10
  • 要循环增加的次数 => len/（leng/(len/10)）

而后再项数组push多个子数组。
之后再去监听table的滚动事件，触底之后就触发loadmore事件，向初始化数组里push残余的子数组；大略思路就是这样。

代码如下
<div class="tale__content">      <Table :height="tableHeight-30" :loading="loading" :columns="columns" :row-class-name="rowClassName" ref="table"        :data="tableData">      </Table>    </div>    <Spin fix v-show="spinShow">加载中...</Spin>
 async getRateData() {        this.loading = true;        const res = await api.getRateList();        this.loading = false;        const tableData = res.data.Data || [];        if (res.data.DetailedStatus === 1) {          let result = tableData.map(item => {            return {              ...item,              isDisabled: true,              btnLoading: false,              isEdit: false            }          });          // 每个子数组存入的数量          let everyItemLength = Math.ceil(result.length / 10);          // 要循环增加的次数          // 因为失去的值有可能不是整数，所以须要向上取整，目标是为了保障最初一次循环不能漏掉          // 如果失去的值是5.4，若不向上取整就只循环5次，少了一次          this.averageNum = Math.ceil(result.length / everyItemLength);          let arr = [];          let i = 0;          while (i < this.averageNum) {            arr.push(result.splice(0, everyItemLength));            i++;          }          //默认给tableData赋值第一个值          this.tableData = arr[0];          //originArr是残缺的二维数组的值，为了给前面拼接数组的取值用          this.originArr = arr;          this.loadmore(this.originArr, this.num)          setTimeout(() => {            this.scrollTable = document.querySelector('.ivu-table-overflowY');            this.listenScroll();          }, 100);        } else          this.$dialog(res.data.DetailedMessage)      },      listenScroll() {        this.$nextTick(() => {        //节流函数，不会写的话找度娘          const {            throttle          } = this.commonFunction;          let self = this;          const listenTableScroll = (e) => {            clearTimeout(self.timer)            if (!self.scrollTable) throw new Error('table初始化还未实现')            let scrollTop = self.scrollTable.scrollTop;            let clientHeight = self.scrollTable.offsetHeight;            let scrollHeight = self.scrollTable.scrollHeight;            if (scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {              console.log('触底');              // 如果超出可加载的次数 return               if (self.num == self.averageNum - 1) return;              self.spinShow = true;              self.timer = setTimeout(() => {                self.spinShow = false;                clearTimeout(self.timer)                self.timer = null;              }, 4000);              //每一次触底，阐明要拼接下一组数据              self.num++;              //调用拼接数组的loadmore办法，并且把接口取到的数组和num值传过来              self.loadmore(self.originArr, self.num)            }          }          // 节流监听 table滚动          self.scrollTable.addEventListener('scroll', throttle(listenTableScroll, 400));        })      },      handleSpinCustom() {        this.$Spin.show({          render: (h) => {            return h('div', [              h('Icon', {                'class': 'demo-spin-icon-load',                props: {                  type: 'ios-loading',                  size: 18                }              }),              h('div', 'Loading')            ])          }        });        setTimeout(() => {          this.$Spin.hide();        }, 3000);      },      loadmore(list, num) {        //如果是0，阐明是第一次加载，不须要拼接数组，从第二次开始才拼接        if (num === 0) return        //让第一次加载的数组拼接上后续的数组 若需兼容低版本浏览器 换成concat        //num可取出对应下标的二维数组值        this.tableData = [...this.tableData, ...list[num]];      },

结构originArr和tableData的最终后果

这算是一个绝对繁难的计划，后续会持续优化....
有问题加QQ：602353272