Element中select多數據加載優(yōu)化的實現

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

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

場景

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

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

一共兩種方案：

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

代碼實現

Vue組件實例

<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
            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」為自定義指令封裝的數據加載指令，是為了解決和優(yōu)化elementUI下拉選擇器加載數據過多出現卡頓問題的。
「filter-method」是下拉選擇器的一個自定義屬性，可以監(jiān)聽輸入的變量，從而依據變量來實現數據的動態(tài)獲?。?/li>

  // 自定義指令
  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();
        });
      }
    }
  }

相應的數據函數

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 || [];
        // 默認展示的數據
        this.options = list;
        // 原始數據
        this.courseList = list;
      });
    }
  }
}

注：