element select 数据量大卡顿

狗狗狗狗亮

于 2020-12-07 16:35:07 发布

阅读量2.4k

点赞数 5

分类专栏：个人笔记 vue

本文链接：https://blog.youkuaiyun.com/weixin_44046951/article/details/110821603

版权

个人笔记同时被 2 个专栏收录

32 篇文章

订阅专栏

vue

29 篇文章

订阅专栏

文章探讨了如何解决在前端UI中因医院数据过多导致的页面卡顿问题。通过只显示200家医院并实现自定义搜索功能，实现了对全量数据的高效过滤。在搜索时，当结果超过200条时，依然限制显示数量，以保持页面性能。代码示例展示了如何使用Vue.js的el-select组件和filter-method属性来实现这一优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
和上篇文章一样，医院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;
   }
 },