iview table組件懶加載

場景

衆所周知，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