🚀 scenario

Recently, I started to develop the background management system based on ElementUI, and accidentally found that there was a problem in the “el-select” drop-down selection. When the amount of data of “options” rendering the drop-down options was too much, “the data items in this project have exceeded 10,000”, the drop-down selector would be stuck. Especially in the case of fuzzy matching filtering, it seems very slow. When initializing the selector, there is also no response when clicked, sometimes it takes multiple clicks to appear in the “Dialog” popover (this drop-down filter is implemented in the popover). After reading several blog notes, I finally found a solution to the problem. Now I record the optimization plan into a note for easy reference when I encounter similar problems in the future.

“📷” icon

⚠️ Note: Select-based drop-down filtering, through custom events to achieve fuzzy search matching.

  • There are two options:

    • One is to obtain all the data, through the input keywords themselves to obtain the data for filtering processing;
    • Second, through the input keyword to dynamically request the background interface, through the interface returned data to dynamically render the drop-down options;

“🍵” code implementation

  • 🌰Vue component instance
<template> <div class="app"> <el-dialog title=" 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 =" select ":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" > sure < / el - button > < / el - col > < / el - row > "< / el - dialog > < / div > < / template >Copy the code
  • 🚗 “V-el-select-loadmore” is a data loading instruction encapsulated by a custom instruction to solve and optimize the problem of elementUI dropdown selector loading too much data.
  • 🚴 Filter-method is a custom attribute of the drop-down selector. It can monitor the input variables to achieve dynamic data acquisition based on the variables.
// Self-defined directives directives: {"el-select-loadmore": (el, Binding) => {// Get the Scroll element defined by Element UI const SELECTWRAP_ROM = el.querySelector(". El-select-dropdown ") .el-select-dropdown__wrap"); If (SELECTWRAP_ROM) {// Add the scroll event selectwrap_rom. addEventListener("scroll", Function () {const condition = this.scrollheight - this.scrollTop <= this.clientheight; condition && binding.value(); }); }}}Copy the code
  • Corresponding data function
Export default {data() {return {relatedOpen: false, options: [] /* Select the value of the dropdown */, courseList: [], rangeNumber: SearchLoad: false /* Dropdown loading state */, 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); }, // Listen on the select dropdown to show and hide visibleChange(flag) {// Initialize the list when displaying flag&& this.filterMethod(""); // Initialize the default value this.rangeNumber = 10; }, / / access options async getOptions () {await searchCourseware (). Then (res = > {let list = res. Data | | []; // The default data to display is this.options = list; // This. CourseList = list; }); }}}Copy the code

Note:

  • Timer function is to prevent input filter keyword is too frequent, resulting in data response is not timely; Because this is a one-time acquisition of all the data, so here is only used for rendering load data;
  • The event function of the selector is mainly used to initialize “get focus” and “lose focus” when processing the default display data. If the network request is obtained, it needs to do “function interception” processing here. The purpose is to reduce the number of interface requests.

“🍎” Summary:

For a new working environment, is beginning to do background management system, more or less will encounter a variety of problems. As always, problems encountered during development will be recorded in notes. A good memory is better than a bad pen, I hope to plant the seeds now, until the next autumn when the harvest 🍒 fruit. JY