Implementation of select multiple data loading optimization in Element

Scenario

I have recently started to develop a background management system based on ElementUI, and accidentally discovered a problem with the "el-select" drop-down selection. When the amount of data in the "options" that render the drop-down options is too large (the number of data entries in this project has exceeded 10,000), the drop-down selector will become stuck, especially in the case of fuzzy matching filtering, it will be very stuck. When initializing the selector, there will be no response when clicking, and sometimes you need to click multiple times before the "dialog" pop-up window appears (this drop-down filter is implemented in the pop-up window). After reading many blog notes, I finally found a solution to the problem. I will now record this optimization plan as a note so that it will be easy to refer to when I encounter similar problems in the future.

Note: Based on the select drop-down filter, fuzzy search matching is achieved through custom events.

There are two options:

• The first is to obtain all the data and filter the obtained data by the input keywords;
• The second is to dynamically request the backend interface through the input keyword, and dynamically render the drop-down options through the data returned by the interface;

Code Implementation

Vue component example

<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="Please 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">OK</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

• "v-el-select-loadmore" is a data loading instruction encapsulated by a custom instruction. It is designed to solve and optimize the problem of lag when the elementUI drop-down selector loads too much data.
• "filter-method" is a custom attribute of the drop-down selector, which can monitor the input variables and dynamically obtain data based on the variables;

  // Custom 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 scroll event SELECTWRAP_ROM.addEventListener("scroll", function() {
      // Determine scrolling const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          condition && binding.value();
        });
      }
    }
  }

The corresponding data function

export default {
  data() {
    return {
      relatedOpen: false,
      options: [] /* Select the value of the drop-down box */,
      courseList: [],
      rangeNumber: 10,
      searchLoad: false /* Loading state of the drop-down box*/,
      value: "",
      timer: null
    };
  },
  created() {
    this.getOptions();
  },
  methods: {
    // Load on demand loadMore(n) {
      return () => (this.rangeNumber += 5);
    },
    // Filter courseware 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 for the display and hiding of the select drop-down box visibleChange(flag) {
      // Initialize list flag when displaying && this.filterMethod("");
      // Initialize default value this.rangeNumber = 10;
    },
    // Get options async getOptions() {
      await searchCourseware().then(res => {
        let list = res.data || [];
        //Default displayed data this.options = list;
        //Original data this.courseList = list;
      });
    }
  }
}

Note:

• The role of the timer is to prevent the input of filtered keywords too frequently, which will cause the data to respond untimely. Because all the data is obtained at one time, it is only used for rendering and loading data.
• The event function of the selector is mainly used to initialize the default display data when "getting focus" and "losing focus". If it is a network request, "function interception" processing is required here; the purpose is to reduce the number of interface requests.

Summarize:

I have changed to a new working environment and am now starting to work on the backend management system. I will encounter various problems to a greater or lesser extent. As always, I will record the problems encountered during development in my notes. A good memory is not as good as a bad pen. I hope to plant the seeds now and reap the fruits next autumn. JY

This is the end of this article about the implementation of optimized select multiple data loading in Element. For more relevant Element select multiple data loading content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!