美文网首页
Vue:解决 element-ui 下拉框过多导致卡顿问题

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

作者: 无脚鸟_8acb | 来源:发表于2019-11-06 16:00 被阅读0次

    标签: 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>
    

    相关文章

      网友评论

          本文标题:Vue:解决 element-ui 下拉框过多导致卡顿问题

          本文链接:https://www.haomeiwen.com/subject/ntomjctx.html