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

成都創新互聯公司擁有十多年成都網站建設工作經驗,為各大企業提供網站設計制作、網站設計服務，對于網頁設計、PC網站建設（電腦版網站建設）、app軟件開發、wap網站建設（手機版網站建設）、程序開發、網站優化（SEO優化）、微網站、主機域名等，憑借多年來在互聯網的打拼，我們在互聯網網站建設行業積累了很多網站制作、網站設計、網絡營銷經驗，集策劃、開發、設計、營銷、管理等網站化運作于一體，具備承接各種規模類型的網站建設項目的能力。

el-select數據過多處理方式

在日常項目中el-select組件的使用頻率是非常之高的. 當數據過多時渲染時間非常長, 這里提供幾個處理方式.

遠程搜索

組件提供了遠程搜索方式, 也就是按照你輸入的結果匹配選項.

下拉懶加載loadMore

下拉懶加載, 當select滾動到底部時, 你再去請求一部分數據, 加入到當前數據中.

某組件中:

<template>
  <el-select
    v-model="value"
    placeholder="請選擇"
    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 獲取元素內容高度(只讀)
          * scrollTop 獲取或者設置元素的偏移值,常用于, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值默認為0.
          * clientHeight 讀取元素的可見高度(只讀)
          * 如果元素滾動到底, 下面等式返回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) {
      // 這里是接口請求數據, 帶分頁條件
      const _res = [1, 2, 3]; // 請求得到的數據
      this.options = [...this.options, ..._res];
    }
  }
};

這樣就做到了滾動懶加載, 具體細節在應用時修改.

問題

這樣渲染問題解決了, 隨之會出現一個問題, 就是當你的value為選中的數據后, 分頁數大的數據.

當頁數小時, options數據中沒有當前value的那一個, value就會顯示為得到的id.

當你選中后你要保存下來當前的id以及lable, 下次過來時, 帶入當前組件, 手動放在options中,這樣就解決了這個問題.

以上是“如何解決el-select數據過多懶加載問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

文章題目：如何解決el-select數據過多懶加載問題
網址分享：http://vcdvsql.cn/article38/gjsgpp.html

成都網站建設公司_創新互聯，為您提供手機網站建設、品牌網站設計、定制網站、外貿建站、建站公司、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯