vue+elementUI el-select 搜索下拉框数据过多 分页加载

一、搜索框数据过多分页加载

1. 需求描述

在前端PC端项目中，下拉框是一个常见的组件，并且在数据量较大时需要进行分页加载，以提升用户体验。通过实现下拉刷新来获取数据，可以更好地优化用户体验。

2.关键词

Select 选择器 ，InfiniteScroll 无限滚动，分页

3.代码实现

3.1 下拉代码

     <el-form-item
        label="项目名称"
        prop="name"
      >
        <el-select
          v-model="form.name"
          placeholder="请选择项目名称"
          filterable
          remote
          :remote-method="remoteMethod"
          @visible-change="visibleHandler"
          @change="selectHandle"
        >
          <div
            v-infinite-scroll="getLoad"    // 下拉加载
            :infinite-scroll-disabled="busy"   // 是否禁用
          >
            <el-option
              v-for="item in list"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </div>
        </el-select>
      </el-form-item>

3.2 需要声明的变量

data () {
   return {
        pageSize:10,  // 分页数量
        currentPage:1,//页码
        haveData: true,
        busy: false, //懒加载状态
   }
}

3.3 远程搜索方法

     remoteMethod (val) {
        this.currentPage = 1;
        this.name = val.trim();
        this.haveData = true;
        this.getList(val);
      }

3.4 下拉框关闭时 清空name

      visibleHandler(e) {
        if (!e && this.name) {
          this.remoteMethod('');
        }
      }

3.5 选择数据

      selectHandle (id) {
      // 获取对应部分数据
        const res = this.list.filter((item) => item.code === id);
        this.form.name = res[0].name;
        //清空list数组
        this.privewList = [];
        this.getList(id);
      }

3.6 获取下拉数据

      getList(name, id) {
        if (!this.haveData) return;
        this.busy = true;
        this.name = name;
        const params = {
          name :name || '',
          id:id,
          pageSize: this.pageSize,
          pageNo: this.currentPage
        };
        this.$store.dispatch('接口api', params) .then(res => {
            if (res.code === 200) {
              this.list= (this.currentPage === 1 ? [] : this.list).concat(res.data);
              this.currentPage += 1;
              if (res.data.length < 10) {
                this.haveData = false;
              }
              this.busy = false;
            }
          })
          .catch(() => {});
      }

3.7 上拉加载

      getLoad() {
        this.getList();
      },