這篇文章主要介紹如何解決el-select數(shù)據(jù)過多懶加載問題，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司擁有十多年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)服務(wù)，對(duì)于網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、app軟件開發(fā)、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、主機(jī)域名等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營(yíng)銷、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。

el-select數(shù)據(jù)過多處理方式

在日常項(xiàng)目中el-select組件的使用頻率是非常之高的. 當(dāng)數(shù)據(jù)過多時(shí)渲染時(shí)間非常長(zhǎng), 這里提供幾個(gè)處理方式.

遠(yuǎn)程搜索

組件提供了遠(yuǎn)程搜索方式, 也就是按照你輸入的結(jié)果匹配選項(xiàng).

下拉懶加載loadMore

下拉懶加載, 當(dāng)select滾動(dòng)到底部時(shí), 你再去請(qǐng)求一部分?jǐn)?shù)據(jù), 加入到當(dāng)前數(shù)據(jù)中.

某組件中:

<template>
  <el-select
    v-model="value"
    placeholder="請(qǐng)選擇"
    filterable
    multiple
    v-el-select-loadmore="loadmore"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.id">
    </el-option>
  </el-select>
</template>
 
export default {
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        // 獲取element-ui定義好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          /**
          * scrollHeight 獲取元素內(nèi)容高度(只讀)
          * scrollTop 獲取或者設(shè)置元素的偏移值,常用于, 計(jì)算滾動(dòng)條的位置, 當(dāng)一個(gè)元素的容器沒有產(chǎn)生垂直方向的滾動(dòng)條, 那它的scrollTop的值默認(rèn)為0.
          * clientHeight 讀取元素的可見高度(只讀)
          * 如果元素滾動(dòng)到底, 下面等式返回true, 沒有則返回false:
          * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },
  data() {
    return {
      value: '',
      options: [],
      formData: {
        pageIndex: 1,
        pageSize: 20,
      }
    };
  },
  mounted() {
    this.getList(this.formData);
  },
  methods: {
    loadmore() {
      this.formData.pageIndex++;
      this.getList(this.formData);
    },
    getList(formData) {
      // 這里是接口請(qǐng)求數(shù)據(jù), 帶分頁條件
      const _res = [1, 2, 3]; // 請(qǐng)求得到的數(shù)據(jù)
      this.options = [...this.options, ..._res];
    }
  }
};

這樣就做到了滾動(dòng)懶加載, 具體細(xì)節(jié)在應(yīng)用時(shí)修改.

問題

這樣渲染問題解決了, 隨之會(huì)出現(xiàn)一個(gè)問題, 就是當(dāng)你的value為選中的數(shù)據(jù)后, 分頁數(shù)大的數(shù)據(jù).

當(dāng)頁數(shù)小時(shí), options數(shù)據(jù)中沒有當(dāng)前value的那一個(gè), value就會(huì)顯示為得到的id.

當(dāng)你選中后你要保存下來當(dāng)前的id以及l(fā)able, 下次過來時(shí), 帶入當(dāng)前組件, 手動(dòng)放在options中,這樣就解決了這個(gè)問題.

以上是“如何解決el-select數(shù)據(jù)過多懶加載問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：如何解決el-select數(shù)據(jù)過多懶加載問題
網(wǎng)址分享：http://chinadenli.net/article38/gjsgpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、外貿(mào)建站、建站公司、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)