Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to achieve select multi-data loading optimization in Element, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

Scene

Recently embarked on the development of ElementUI-based background management system, accidentally found that "el-select" drop-down selection encountered a problem, when rendering the drop-down option "options" too much data, "this project has more than ten thousand data entries", there will be a drop-down selector stutter, especially in the case of fuzzy matching filtering, appears to be very stuttered. When initializing the selector, it will also click unresponsive, and sometimes you need to click multiple times to appear the "dialog" pop-up window (this drop-down filter is implemented in the pop-up window). After flipping through many blog notes, I finally found a solution to the problem. Now record the optimization plan as a note so that it is easy to consult when you encounter similar problems in the future.

Note: based on the drop-down filtering of select, fuzzy search matching is realized through custom events.

There are two options:

One is to get all the data and filter the obtained data by entering keywords.

The second is to dynamically request the background interface through the keywords entered, and dynamically render the drop-down options through the data returned by the interface.

Code implementation

Vue component instance

Confirm

"v-el-select-loadmore" is a data loading instruction encapsulated by a custom instruction to solve and optimize the stutter problem caused by too much data loaded by the elementUI drop-down selector.

"filter-method" is a custom property of the drop-down selector, which can listen to the input variables and realize the dynamic acquisition of data according to the variables.

/ / Custom instruction directives: {"el-select-loadmore": (el, binding) = > {/ / get the scroll element const SELECTWRAP_ROM = el.querySelector defined by element UI (".el-select-dropdown .el-select-dropdown__wrap") If (SELECTWRAP_ROM) {/ / add scroll event SELECTWRAP_ROM.addEventListener ("scroll", function () {/ / judge scroll const condition = this.scrollHeight-this.scrollTop (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 to the display and hiding of select drop-down boxes visibleChange (flag) {/ / initialize the list flag & & this.filterMethod ("") on display; / / initialize the default value this.rangeNumber = 10;}, / / get the option async getOptions () {await searchCourseware () .then (res = > {let list = res.data | | [] / / data displayed by default this.options = list; / / original data this.courseList = list;});}

Note:

The function of timer is to prevent the input of filtered keywords from being too frequent, so that the data response is not timely. Because all the data is obtained at once, 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 "gaining focus" and "losing focus". If you get a network request, you need to do "function interception" processing here; the purpose is to reduce the number of API requests.

Thank you for reading this article carefully. I hope the article "how to achieve select Multi-data loading Optimization in Element" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.