Excessive processing of El select data

In daily projects, El select components are frequently used. When there is too much data, the rendering time is very long. Here are several processing methods

Remote search

Component provides a remote search method that matches the results you enter

Official website provides Reference example There is no further explanation here

Dropdown lazy load loadMore

Pull down lazy loading. When select scrolls to the bottom, you can request some data to add to the current data

In a component:

<template>
    <el-select
        v-model="value"
        placeholder="Please choose"
        filterable
        multiple
        v-el-select-loadmore="loadmore"
    >
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.label"
            :value="item.id">
        </el-option>
    </el-select>
</template>

export default {
    directives: {
        'el-select-loadmore': {
            bind(el, binding) {
                // Get the scroll box defined by element UI
                const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                SELECTWRAP_DOM.addEventListener('scroll', function () {
                    /**
                    * scrollHeight Get element content height (read only)
                    * scrollTop Gets or sets the offset value of an element. It is often used to calculate the position of a scroll bar. When an element's container does not produce a scroll bar in a vertical direction, its scrollTop value defaults to 0
                    * clientHeight Read the visible height of the element (read only)
                    * If the element scrolls to the end, the following equation returns true, otherwise false:
                    * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                    */
                    const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
                    if (condition) {
                        binding.value();
                    }
                });
            }
        }
    },
    data() {
        return {
            value: '',
            options: [],
            formData: {
                pageIndex: 1,
                pageSize: 20,
            }
        };
    },
    mounted() {
        this.getList(this.formData);
    },
    methods: {
        loadmore() {
            this.formData.pageIndex++;
            this.getList(this.formData);
        },
        getList(formData) {
            // Here is the interface request data with paging conditions
            const _res = [1, 2, 3]; // Requested data
            this.options = [...this.options, ..._res];
        }
    }
};

In this way, rolling lazy loading is achieved, and specific details are modified during application

problem

So the rendering problem is solved, and then there will be a problem, that is, when your value is the selected data, the number of pages is large
When there is no current value in the options data, the value will be displayed as the id

When you select it, you need to save the current id and label. Next time you come here, you will bring in the current component and put it in options manually,
This solves the problem