Vue：解决 element-ui 下拉框过多导致卡顿问题

标签： Vue element-ui

原因：下拉框数据过多，若渲染全部数据，会导致 DOM 数量太多，操作卡顿。

解决办法：将获取的数据（allList）和渲染数据（list）分离开，限制渲染数组的长度。

<template>
    <el-select v-model="value" filterable :filter-method="filterList" placeholder="请选择">
        <el-option
            v-for="item in allList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        ></el-option>
    </el-select>
</template>

<script>
export default {
    data() {
        return {
            // 渲染列表，限制在20个以内
            list: [],
            // 请求获取的列表，数据量过大时不能直接渲染，会卡顿
            allList: [
                {
                    value: "选项1",
                    label: "黄金糕"
                },
                {
                    value: "选项2",
                    label: "双皮奶"
                },
                {
                    value: "选项3",
                    label: "蚵仔煎"
                },
                {
                    value: "选项4",
                    label: "龙须面"
                },
                {
                    value: "选项5",
                    label: "北京烤鸭"
                }
            ],
            value: ""
        };
    },
    created() {
        // 模拟某些情况，需要设置默认的下拉选项，防止默认选中值显示不正常（例如：不显示label，而显示value）
        this.list = [{
                    value: "选项4",
                    label: "龙须面"
                },
                {
                    value: "选项5",
                    label: "北京烤鸭"
                }]
    },
    methods: {
        filterList(query = "") {
            let arr = this.allList.filter(item => {
                return item.label.includes(query) || item.value.includes(query);
            });
            if (arr.length > 20) {
                this.list = arr.slice(0, 20);
            } else {
                this.list = arr;
            }
        }
    }
};
</script>