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