The use of element-ui in front-end projects is almost a regular action, but the ui components in the component library may not necessarily meet the needs of actual scenarios, such as the select drop-down box to select components today.
Our company is engaged in the securities industry infrastructure, and the number of stocks and securities is always thousands. When using select rendering, it will be very stressful. Our company roughly 3,000 pieces of data, and it takes about 4 seconds to render all of them. When the multi-select mode is selected, it will obviously feel stuttered when selecting and unselecting. This is unacceptable in terms of experience, so we started the optimization process.
Plan 1
Make the pull-down multi-select function into a pop-up table multi-select
Feasibility: Set selection attributes on the table, and the page turning function can solve big data problems
Actual situation: There are only 2 fields to be displayed, which is too few for the table, which seems to be space; the product also disagrees.
Abandoned ~~
Plan 2
Using select's remote search function, initialization only loads the specified amount of data, and other data are queried through the search function.
Feasibility: It can meet the needs of big data, but it has a little discount on the experience, and the background can also support it
Actual situation: The product is acceptable
I only thought of these two solutions for the time being, and discussed with the backend, which is implementable, so I adopted this solution.
Program Analysis
1. The root of the problem is that too much data is rendered at once, causing lag. Then the data loaded for the first time needs to find a critical value that can meet business needs to the maximum extent and load without any sense. In the end, I chose 300 items.
2. Pass queryName as fuzzy query condition when entering Chinese search
3. If ticking 300 pieces of data after being checked through the search conditions and losing focus, when regaining the focus, you need to put the selected data at the front of the 300 pieces of data to facilitate users to view and reverse selection. At this time, you need to use the id combination of the selected data as the query condition queryIds
4. When editing, the background will only return the id set corresponding to the item added when the new item is added. To correctly display the corresponding name value, the id set needs to be used as parameter request list data. If the parameters are not added, the first 300 pieces of data will be returned by default. If there is data after 300 in the id, it will not be displayed correctly. No need to pass the parameters when the first new is added.
Based on the above analysis, start writing code
<!-- -->
<template>
<div class="container">
<el-select
v-model="selectVal"
filterable
multiple
clearable
collapse-tags
remote
reserve-keyword
:remote-method='remoteMethod'
@focus="focus"
>
<el-option v-for="(item, index) in options" :key="index"
:label=''
:value=''
>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data () {
return {
selectVal: [],
options: [
// {
// id: 1,
// label: 'one'
// },
// {
// id: 1,
// label: 'one'
// }
]
};
},
mounted() {
()
},
methods: {
getData(queryName, queryIds) {
this.$api('api/get', {
queryName: queryName || '',
queryIds: queryIds || '',
}).then(res => {
=
}).catch(err => {
// dosomething
})
},
remoteMethod(query) {
// Enter text to search fuzzyly, overwrite old data (query)
},
focus(event) {
if(!) return // If it is checked or reversed, the drop-down option if(!) { // Triggered when there is no search condition in the input box (undefined, )
}
}
}
}
</script>
<style lang='scss' scoped>
</style>The focus function is used to solve problem 3 or get focus during editing, but the focus method will be triggered when clicking the option in element-ui select. Comparing the real focus and click, it is found that only the values can be distinguished, so it is used to distinguish these two events;
If there are search conditions, the id search will not be triggered, and only the default remoteMethod can be triggered.
It can be used when adding new data, and you will encounter problem 4 when editing. At this time, you need to use the returned id set as the parameter to request pull-down data to correctly display the selected data.
data () {
return {
selectVal: [],
options: [
// {
// id: 1,
// label: 'one'
// },
// {
// id: 1,
// label: 'one'
// }
],
type: 'edit'
};
},
mounted() {
()
},
methods: {
initDialog() {
().then(ids => {
= ids
(undefined, ids)
})
},
getEditInfo(type) {
return new Promise((resolve, reject) => {
if(type === 'edit') { // edit this.$api('api/getInfo', {}).then(res => {
let ids =
resolve(ids)
}).catch(err => {
// dosomething
})
}else {
resolve()
}
})
},
getData(queryName, queryIds) {
this.$api('api/getOptions', {
queryName: queryName || '',
queryIds: queryIds || '',
}).then(res => {
=
}).catch(err => {
// dosomething
})
},
remoteMethod(query) {
// Enter text to search fuzzyly, overwrite old data (query)
},
focus(event) {
if(!) return // If it is checked or reversed, the drop-down option if(!) { // Triggered when there is no search condition in the input box (undefined, )
}
}
}This can meet the needs of big data loading
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.