Element中select多資料載入優化的實現
阿新 • • 發佈:2021-09-28
目錄
- 場景
- 程式碼實現
- 總結:
場景
近期著手開發基於ElementUI的後臺管理系統,偶然間發現「el-select」下拉選擇時候遇到一個問題,當渲染下拉選項的「options」的資料量過多時「本專案中的資料條目已過萬」,就會出現下拉選擇器卡頓的情況,尤其是在模糊匹配過濾的情況下,顯得十分的卡頓。初始化選擇器的時候,也會點選無反應,有時候需要點選多次才可出現「dialog」彈窗(本次下拉篩選在彈窗中實現)。 翻閱多篇部落格筆記之後,最終找到一個可以解決問題的方案,現將此次優化方案記錄成為筆記,以便於日後遇到類似問題的時候便於查閱。
注:基於select的下拉篩選,通過自定義事件來實現模糊搜尋匹配。
一共兩種方案:
- 一是獲取所有資料,通過輸入的關鍵字自己對獲取的資料進行過濾處理;
- 二是通過輸入的關鍵字來動態請求後臺介面,通過介面返回的資料來動態渲染下拉選項;
程式碼實現
元件例項
<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)" :keyRERiuPj="item.key" :label="item.value" :value="item.key"></el-option> </el-select> </el-col> <el-cohttp://www.cppcns.coml :span="4"> <el-button type="primary" @click="submit">確定</el-button> </el-col> </el-row> </el-dialog> </div> </template>
- 「v-el-select-loadmore」為自定義指令封裝的資料載入指令,是為了解決和優化elementUI下拉選擇器載入資料過多出現卡頓問題的。
- 「filter-method」是下拉選擇器的一個自定義屬性,可以監聽輸入的變數,從而依據變數來實現資料的動態獲取;
// 自定義指令 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狀態 */,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); },// 監聽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; }); } } }
注:
- 定時器作用是防止輸入篩選的關鍵字太過頻繁,從而造成資料響應不及時;因為本次是一次性獲取了全部的資料,所以這裡只是用做渲染載入資料;
- 選擇器的事件函式主要是用來初始化“獲取焦點”和“失去焦點”時處理預設展示資料用的,若是獲取的網路請求,此處需要做“函式截流”處理;目的是減少介面請求次數。
總結:
換了新的工作環境,現開始著手做後臺管理系統,或多或少會遇到各種各樣的問題。一如即往,會在筆記中記錄開發中遇到的問題。好記性不如爛筆頭,希望現在埋下種子,等到來年秋天的時候會收穫🍒果實。JY
到此這篇關於Element中select多資料載入優化的實現的文章就介紹到這了,更多相關Element select多資料載入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!