ElementUI 中控件 Select 大数据量渲染处理

时间：2020-09-16 14:46:53 阅读：471 评论：0 收藏：0 [点我收藏+]

问题：element UI 中 select 数据量太大，渲染太慢怎么处理？

处理方式：

<el-select v-model="ruleForm.animalOwnerId" filterable style="width:100%;" placeholder="请选择养殖户" clearable :filter-method="animalOwnerD">

<el-option v-for="item in ownerTop200" :key="item.value" :label="item.name" :value="item.value"></el-option>

</el-select>

methods：

{

//ownerList 大数据量集合

//ownerTop200大数据量中前200条记录

//超过200条记录后结果查询

animalOwnerD(query=""){

let arr = this.ownerList.filter(item => {

return item.name.includes(query);

});

if (arr.length > 200) {

this.ownerTop200= arr.slice(0, 200);

} else {

this.ownerTop200= arr;

}

//接口返回大数据量集合

getOwnerList(orgParmars).then(data => {

this.ownerList = data;

this.ownerTop200= data.slice(0, 200);

});

}

原文：https://www.cnblogs.com/wu-peng/p/13678743.html

踩

(0)

评论一句话评论（0）

分享档案

更多>