element select 数据量大卡顿

和上篇文章一样，医院8000多家。
全部放在select的option里。会造成页面的卡顿。同时还需要过滤搜索数据。
这里可以把数据分开，只展示200条。搜索方法使用提供的自定义搜索，搜索全部数据。

select组件

<el-form-item label="所属医院" label-width="100px" prop="hospitalIds">
   <el-select
      v-model="AdduserForm.hospitalIds"
      filterable
      clearable
      :filter-method="filterHospital"
      placeholder="请选择"
      style="width:100%"
    >
      <el-option
        v-for="item in HospitalListTop200"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </el-form-item>

js部分

// 获取医院列表
    getHospitalList() {
      this.$api.Hospital.GetHospitalList().then(res => {
        if (res.status == 200) {
          this.HospitalList = res.data.response;
          this.HospitalListTop200 = res.data.response.slice(0, 200);   //取前两百条展示
        }
      });
    },
 // 过滤医院
 filterHospital(query = "") {
   console.log(query, "==>query");
   let arr = this.HospitalList.filter(item => {
     return item.name.includes(query);
   });
   if (arr.length > 200) {
     this.HospitalListTop200 = arr.slice(0, 200);
   } else {
     this.HospitalListTop200 = arr;
   }
 },