ElementUI 中控件 Select 大數據量渲染處理


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM