快捷導(dǎo)航

Element中select多數(shù)據(jù)加載優(yōu)化的實現(xiàn)

更新時間：2021年09月26日 16:17:07 作者：下落香樟樹

本文主要介紹了Element中select多數(shù)據(jù)加載優(yōu)化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

場景

近期著手開發(fā)基于ElementUI的后臺管理系統(tǒng)，偶然間發(fā)現(xiàn)「el-select」下拉選擇時候遇到一個問題，當(dāng)渲染下拉選項的「options」的數(shù)據(jù)量過多時「本項目中的數(shù)據(jù)條目已過萬」，就會出現(xiàn)下拉選擇器卡頓的情況，尤其是在模糊匹配過濾的情況下，顯得十分的卡頓。初始化選擇器的時候，也會點擊無反應(yīng)，有時候需要點擊多次才可出現(xiàn)「dialog」彈窗（本次下拉篩選在彈窗中實現(xiàn)）。翻閱多篇博客筆記之后，最終找到一個可以解決問題的方案，現(xiàn)將此次優(yōu)化方案記錄成為筆記，以便于日后遇到類似問題的時候便于查閱。

注：基于select的下拉篩選，通過自定義事件來實現(xiàn)模糊搜索匹配。

一共兩種方案：

一是獲取所有數(shù)據(jù)，通過輸入的關(guān)鍵字自己對獲取的數(shù)據(jù)進行過濾處理；
二是通過輸入的關(guān)鍵字來動態(tài)請求后臺接口，通過接口返回的數(shù)據(jù)來動態(tài)渲染下拉選項；

代碼實現(xiàn)

Vue組件實例

<template>
  <div class="app">
    <el-dialog title="標(biāo)題" :visible.sync="relatedOpen" :append-to-body="true" width="500px">
      <el-row :gutter="16">
        <el-col :span="20">
          <el-select
            v-model="value"
            filterable
            clearable
            style="width:100%"
            placeholder="請選擇"
            :loading="searchLoad"
            :filter-method="filterMethod"
            v-el-select-loadmore="loadMore(rangeNumber)"
            @visible-change="visibleChange"
          >
            <el-option v-for="item in options.slice(0, rangeNumber)" :key="item.key" :label="item.value" :value="item.key"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="submit">確定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

「v-el-select-loadmore」為自定義指令封裝的數(shù)據(jù)加載指令，是為了解決和優(yōu)化elementUI下拉選擇器加載數(shù)據(jù)過多出現(xiàn)卡頓問題的。
「filter-method」是下拉選擇器的一個自定義屬性，可以監(jiān)聽輸入的變量，從而依據(jù)變量來實現(xiàn)數(shù)據(jù)的動態(tài)獲取；

  // 自定義指令
  directives: {
    "el-select-loadmore": (el, binding) => {
      // 獲取element UI定義好的scroll元素
      const SELECTWRAP_ROM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
      if (SELECTWRAP_ROM) {
    // 添加scroll事件
        SELECTWRAP_ROM.addEventListener("scroll", function() {
      // 判斷滾動
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          condition && binding.value();
        });
      }
    }
  }

相應(yīng)的數(shù)據(jù)函數(shù)

export default {
  data() {
    return {
      relatedOpen: false,
      options: [] /* 選擇下拉框的值 */,
      courseList: [],
      rangeNumber: 10,
      searchLoad: false /* 下拉框的loading狀態(tài) */,
      value: "",
      timer: null
    };
  },
  created() {
    this.getOptions();
  },
  methods: {
    // 按需加載
    loadMore(n) {
      return () => (this.rangeNumber += 5);
    },
    // 過濾課件
    filterMethod(query) {
      if (this.timer != null) clearTimeout(this.timer);
      !this.searchLoad && (this.searchLoad = true);
      this.timer = setTimeout(() => {
        this.options = !!query ? this.courseList.filter(el => el.value.toLowerCase().includes(query.toLowerCase())) : this.courseList;
        clearTimeout(this.timer);
        this.searchLoad = false;
        this.rangeNumber = 10;
        this.timer = null;
      }, 500);
    },
    // 監(jiān)聽select下拉框的顯示和隱藏
    visibleChange(flag) {
      // 顯示時初始化列表
      flag && this.filterMethod("");
      // 初始化默認值
      this.rangeNumber = 10;
    },
    // 獲取選項
    async getOptions() {
      await searchCourseware().then(res => {
        let list = res.data || [];
        // 默認展示的數(shù)據(jù)
        this.options = list;
        // 原始數(shù)據(jù)
        this.courseList = list;
      });
    }
  }
}

注：

定時器作用是防止輸入篩選的關(guān)鍵字太過頻繁，從而造成數(shù)據(jù)響應(yīng)不及時；因為本次是一次性獲取了全部的數(shù)據(jù)，所以這里只是用做渲染加載數(shù)據(jù)；
選擇器的事件函數(shù)主要是用來初始化“獲取焦點”和“失去焦點”時處理默認展示數(shù)據(jù)用的，若是獲取的網(wǎng)絡(luò)請求，此處需要做“函數(shù)截流”處理；目的是減少接口請求次數(shù)。

總結(jié)：

換了新的工作環(huán)境，現(xiàn)開始著手做后臺管理系統(tǒng)，或多或少會遇到各種各樣的問題。一如即往，會在筆記中記錄開發(fā)中遇到的問題。好記性不如爛筆頭，希望現(xiàn)在埋下種子，等到來年秋天的時候會收獲🍒果實。JY

到此這篇關(guān)于Element中select多數(shù)據(jù)加載優(yōu)化的實現(xiàn)的文章就介紹到這了,更多相關(guān)Element select多數(shù)據(jù)加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: