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