Solution to excessive elementui El select data

MK Mack 2021-09-15 10:22:13

1. Scene description

I don't know if you have such experience , There are many options in the drop-down box , Tens of thousands of options or more , At this time, if you put all the data in the drop-down box to render it , The browser will get stuck , The experience will be particularly bad

The employer will say element-ui Of select There is one remote-method, Support remote search , We can't just let the server support it , Of course, this is a solution . But sometimes it doesn't have to work

(1) Sometimes the server data is returned to us after calculation , Maybe it's not too fast to return , The experience is not very good

(2) Sometimes there are only a few thousand pieces of data , The whole rendering is not suitable , It's not particularly good to keep losing interface

(3) Can we solve it just through the front end , If it can be solved , Does it reduce the work and pressure of the server

2. terms of settlement

1 ) Staged loading : Drop down items are also not loaded , By clicking the drop-down box , Reload , At this point, all the options are loaded , This case is only applicable to slow loading , You need to click after loading to drop-down options , The experience is average .

2 ) Tips :element-ui Of select There is one filter-method Method , We can use this method to filter the dropdown items

Let's say we have a drop-down box to select users

<el-select
v-model="userId"
filterable
:filter-method="userFilter"
clearable>
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.username"
:value="item.userId"
></el-option>
</el-select>
 Copy code 
userFilter(query = '') {
let arr = this.allUserList.filter((item) => {
return item.username.includes(query) || item.userId.includes(query)
})
if (arr.length > 50) {
this.userList = arr.slice(0, 50)
} else {
this.userList = arr
}
},
getUserWhiteList() {
HttpRequest.post("/api/admin/community/getUserWhiteList").then(
response => {
this.allUserList = response.data.list;
this.userFilter()
}
);
},
 Copy code 

As shown above , We get the user list from the background , After our own filtering , We only render 50 Data , No matter how much data , We also support a variable , Take up memory . Of course, the more data , Array traversal will also be slow , But it doesn't matter much .

We can not only filter names , We can also filter any of the items we have made

Optimize : We can also optimize the above code properly , Only found that the array length exceeds 50 term , Let's stop traversing

Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15

2021-09-15

2021-09-15