首页 > 其他 > 详细

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

时间:2020-09-16 14:46:53      阅读:469      评论: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);
      });
 
}

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!