解决前端el-select下拉数据量过大造成卡顿问题

最新推荐文章于 2024-06-18 15:09:24 发布

YinXinLion

最新推荐文章于 2024-06-18 15:09:24 发布

阅读量4k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_27602093/article/details/116804286

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景

商家入驻申请单批量转移给某位招商人员，实现了一个下拉列表，可以进行下拉选择或者通过pin去搜索，业务犯困页面卡顿，查看是因为下拉列表数据量过大，页面渲染导致。
在这里插入图片描述

解决

数据量每次展示的时候，只提取出前30条数据，展示。

<el-select v-model="nextChecker" filterable placeholder="请选择分配人" :filter-method="filterCheckPerOptions" size="small">+
        <el-option v-for="item in checkPerOptionsTop30":key="item.userPin":label="item.userName":value="item.userPin"></el-option>+
 </el-select>+

通过:filter-method来提取出前30条数据。

 filterCheckPerOptions: function(query = "") {
            console.log(query, "==>query");
            var arr = this.checkPerOptions.filter(item => {
                return item.userName.includes(query);
            });
            if (arr.length > 200) {
                this.checkPerOptionsTop30 = arr.slice(0, 30);
            } else {
                this.checkPerOptionsTop30 = arr;
            }
        },

参考博客：
element select 数据量大卡顿