Element中如何實(shí)現select多數據加載優(yōu)化

這篇文章主要介紹了Element中如何實(shí)現select多數據加載優(yōu)化，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著(zhù)大家一起了解一下。

場(chǎng)景

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

注：基于select的下拉篩選，通過(guò)自定義事件來(lái)實(shí)現模糊搜索匹配。

一共兩種方案：

• 一是獲取所有數據，通過(guò)輸入的關(guān)鍵字自己對獲取的數據進(jìn)行過(guò)濾處理；

• 二是通過(guò)輸入的關(guān)鍵字來(lái)動(dòng)態(tài)請求后臺接口，通過(guò)接口返回的數據來(lái)動(dòng)態(tài)渲染下拉選項；

代碼實(shí)現

Vue組件實(shí)例

<template>
  <div class="app">
    <el-dialog title="標題" :visible.sync="relatedOpen" :append-to-body="true" width="500px">
      <el-row :gutter="16">
        <el-col :span="20">
          <el-select
            v-model="value"
            filterable
            clearable
            
            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」為自定義指令封裝的數據加載指令，是為了解決和優(yōu)化elementUI下拉選擇器加載數據過(guò)多出現卡頓問(wèn)題的。

• 「filter-method」是下拉選擇器的一個(gè)自定義屬性，可以監聽(tīng)輸入的變量，從而依據變量來(lái)實(shí)現數據的動(dòng)態(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() {
      // 判斷滾動(dòng)
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          condition && binding.value();
        });
      }
    }
  }

相應的數據函數

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);
    },
    // 過(guò)濾課件
    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);
    },
    // 監聽(tīng)select下拉框的顯示和隱藏
    visibleChange(flag) {
      // 顯示時(shí)初始化列表
      flag && this.filterMethod("");
      // 初始化默認值
      this.rangeNumber = 10;
    },
    // 獲取選項
    async getOptions() {
      await searchCourseware().then(res => {
        let list = res.data || [];
        // 默認展示的數據
        this.options = list;
        // 原始數據
        this.courseList = list;
      });
    }
  }
}

注：

• 定時(shí)器作用是防止輸入篩選的關(guān)鍵字太過(guò)頻繁，從而造成數據響應不及時(shí)；因為本次是一次性獲取了全部的數據，所以這里只是用做渲染加載數據；

• 選擇器的事件函數主要是用來(lái)初始化“獲取焦點(diǎn)”和“失去焦點(diǎn)”時(shí)處理默認展示數據用的，若是獲取的網(wǎng)絡(luò )請求，此處需要做“函數截流”處理；目的是減少接口請求次數。