elementUI的select下拉框组件实现分页加载数据

第一种方法：添加分页，页面样式如下，JS逻辑与平常分页没区别

          <el-select :disabled="noChange[index]==true || applyDataItem.processKey == 'componentFastAdd'"
                     style="width:68%"
                     v-model="chooseUser[index]"
                     clearable
                     filterable
                     placeholder="请选择人员">
            <div class="option">
              <el-option
                  v-for="user in allUsers"
                  :key="user.id"
                  :label="user.userName"
                  :value="user.id">
              </el-option>
            </div>
            <div class="pagin">
              <el-pagination
                  small
                  @size-change="sizeChange"
                  :current-change="currentChange"
                  :page-size="pageSize"
                  layout="prev, pager,next,total"
                  :total="total"
              >
              </el-pagination>
            </div>
          </el-select>

css

.option{
  min-height: 100px;
  height: auto;
  max-height: 200px;
  overflow-y: auto;
}
.pagin{
  background:#fff;
}
::-webkit-scrollbar{
  width: 2px;
}

第二种方法：下拉加载更多

1.写一个指令

/**
  * select 下拉框 底部触发指令
 */
Vue.directive('selectLoadMore',{
  bind (el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      if (this.scrollHeight - this.scrollTop < this.clientHeight + 1) {
        binding.value()
      }
    })
  }
})

2.页面使用指令，添加远程搜索属性和方法

            <el-select
                       style="width:68%"
                       v-model="chooseUser[index]"
                       clearable
                       filterable
                       v-selectLoadMore="selectLoadMore"
                       :loading="loading"
                       remote
                       :remote-method="remoteMethod"
                       placeholder="请选择人员">
              <el-option
                  v-for="user in allUsers"
                  :key="user.id"
                  :label="user.userName"
                  :value="user.id">
              </el-option>
            </el-select>

3.JS写逻辑

    // 下拉加载更多
    selectLoadMore() {
      this.search.pageNum = this.search.pageNum + 1;
      if (this.search.pageNum > this.totalPage) return;
      this.readAllUsers(); // 请求接口
    },
    // 远程搜索
    remoteMethod(query) {
      this.loading = true;
      this.search.query = query;
      this.search.pageNum = 1;
      this.allUsers = [];
      setTimeout(() => {
        this.loading = false;
        this.readAllUsers(); // 请求接口
      }, 200)
    },
// 获取数据
readAllUsers() {
  let params = {
    num:this.search.pageNum,
    size:this.search.pageSize,
    userName:this.search.query,
  }
  readUserPageList(params).then((res) => {
    this.totalPage = res.pages;
    this.total = res.total;
    this.allUsers = this.allUsers.concat(res.data);
  });
},