el-select the options of data over 3000 front page will result in significantly Caton, this time my business scene data encountered in recent 2w strip, so pages can never be used without optimization, here are my optimization process.
A method of optimizing ideas:
The element-ui select a remote-method, support for remote search, we let the server does not support what you can, of course, this is a solution to the problem. But sometimes this approach and I can not apply, because this will echo problem, echo time is needed to get the desired option;
My approach:
The element-ui select a fildter-method approach, we can filter drop-down item by this method
Suppose we have a drop-down box is used 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>Here userId encapsulated into the v-model:
props: {
value: {
type: [String, Number],
default: ''
}
},
computed: {
userId: {
get () {
return this.value || ''
},
set (value) {
this.$emit('input', value)
}
}
},Option data acquisition and filtering methods:
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()
}
);
},Note that the total option (allUserList) when the echo from the get significant value will be needed, and added to the display option (userList) in:
addValueOptions () {
if (this.userId) {
let target = this.allUserList.find((item) => { // 从大option中找到当前条
return item.value === this.userId
})
if (target) { // 将当前条与小option比对，没有则加入
if (this.userList.every(item => item.value !== target.value)) {
this.userList.unshift(target)
}
}
}
},ok, problem solved.
