背景
商家入驻申请单批量转移给某位招商人员,实现了一个下拉列表,可以进行下拉选择或者通过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 数据量大卡顿