el-select el-option 当有海量数据时过滤时,需要自己先进行过滤,限制el-option的绘制
避免渲染大量dom导致性能问题,采用计算性能换取渲染性能的方式优化
具体方法:
<el-form-item label="车牌号:" prop="plateNumber">
<el-select
filterable
v-model="listQuery.plateNumber"
placeholder="请选择车牌号"
:filter-method="plateFilter"
>
<el-option
v-for="item in plateNumberList"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
plateFilter(query) {
let arr = this.allPlateList.filter((item) => {
return item.includes(query);
});
//超过50个结果去掉
if (arr.length > 50) {
this.plateNumberList = arr.slice(0, 50);
} else {
this.plateNumberList = arr;
}
},