Start with a picture, all edited. Everybody is good! I am: Remember the cache. Write this article basically is to set up a flag, if have inadequacy place, ask each big guy to give advice a lot. Without further ado, let’s get to the point.

Problem description

I am using VUE + Element technology stack to develop the background management system. There was a problem during development: too much el-Select data caused the page to lag.

solution

Now that you know what’s causing the lag, you can do the right thing: reduce the el-Options data. Encapsulate another own SELECT ==> MyElSelect

process

  1. Pass in all of the optionsList first, and take the first 50.
MyElSelect.vue
props: {
    allList: {
        type: Array,
        default: () => []
    }
}

 mounted () {
    this.options = this.allList.slice(0, 50);
},
Copy the code
  1. Since we only took the first 50, we need to customize the search method.
<template> <el-select v-model="selectValue" v-bind="customizedAttrs" v-on="$listeners" @change="handleChange" :filter-method="handleFilter"> <el-option v-for="item in options" :key="item[optionValue]" :label="item[optionLabel]" :value="item[optionValue]"> </el-option> </el-select> </template> <script> export default { name: 'MyElSelect', inheritAttrs: false, props: { allList: { type: Array, default: () => []}, // optionValue: {type: String, default: 'id'}, // label: { type: String, default: 'name' } }, data () { return { options: [], selectValue: '' } }, computed: { customizedAttrs() { return { ... this.$attrs, }; }, }, methods: { handleFilter (val) { let options = this.allList.filter((item) => { return item[this.optionLabel].includes(val) }); This. options = options. Slice (0, 50); } } } </script>Copy the code

In order to use it like el-select, I learned from this guy’s pass-through: juejin.cn/post/693968… At this point, the search is complete, and the only problem left to solve is the last echo

V -model < my-el-select V -model=”parentSelectValue”>
with My myelselect. vue

handleChange (val) {
    this.$emit("input", val);
},
Copy the code

$attrs.value = this.$attrs.value = this.$attrs.value = this.

mounted () { this.initData(); }, initData () { let options = []; If (this.$attrs.value) {// This. SelectValue = this. let index = -1; let targetItem = {}; // find item for (let I = 0; i < this.allList.length; i++) { let item = this.allList[i]; if (item[this.optionValue] == this.$attrs.value) { index = i; targetItem = item; break; } } if (index ! If (index < 50) {options = this.allList.slice(0, 50); } else {// 50 options = this.allList.slice(0, 50); options.unshift(targetItem); This.selectvalue = "";}} else {// do not find it. options = this.allList.slice(0, 50); } } else { options = this.allList.slice(0, 50); } this.options = options; // console.log(this.options) },Copy the code

use

I didn’t want to refer to every page yet so I registered the global component in main.js.

import MyElSelect from '@/components/Form/MyElSelect';
Vue.component("MyElSelect", MyElSelect);
Copy the code

Final use:

< my-el-select V-model ="form.wharfId" :allList="wharfList" placeholder=" Filterable class="hundredPercent" size="small"> </My-El-Select>Copy the code

conclusion

If it helps, please give me a thumbs up. If it doesn’t help you, I’ll give you a thumbs-up. Have what write bad, point out I affirmation change (dish chicken shiver. PNG).