問題: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);
});
}
