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

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

处理方式：

 <el-select v-model="ruleForm.animalOwnerId" filterable style="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);

      });

 

}