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

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

1. 需求描述

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

2.关键词

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

3.代码实现

3.1 下拉代码

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();
      },