Skip to content

下拉框添加分页功能

css
<el-form-item label="店铺搜索:">
              <el-select
                ref="select"
                v-model="createStoreIds"
                placeholder="请选择"
                :loading="loading"
                :remote-method="remoteMethod"
                multiple
                filterable
                remote
                reserve-keyword
              >
                <el-option
                  v-for="item in storeOptions"
                  :key="item.id"
                  :label="item.storeName"
                  :value="item.id"
                ></el-option>
                <div style="position: sticky; background: #fff; height: 30px; bottom: 0; z-index: 1; margin-top: 0">
                  <el-pagination
                    @size-change="onSelectPageSizeChange"
                    @current-change="onSelectPageNumChange"
                    :current-page="selectPageNo"
                    :page-size="selectPageSize"
                    :page-sizes="[5, 10, 15, 50, 100]"
                    layout="prev, pager, next, jumper, sizes, total"
                    v-if="selectTotalCount"
                    :total="selectTotalCount"
                  ></el-pagination>
                </div>
              </el-select>
            </el-form-item>
<el-form-item label="店铺搜索:">
              <el-select
                ref="select"
                v-model="createStoreIds"
                placeholder="请选择"
                :loading="loading"
                :remote-method="remoteMethod"
                multiple
                filterable
                remote
                reserve-keyword
              >
                <el-option
                  v-for="item in storeOptions"
                  :key="item.id"
                  :label="item.storeName"
                  :value="item.id"
                ></el-option>
                <div style="position: sticky; background: #fff; height: 30px; bottom: 0; z-index: 1; margin-top: 0">
                  <el-pagination
                    @size-change="onSelectPageSizeChange"
                    @current-change="onSelectPageNumChange"
                    :current-page="selectPageNo"
                    :page-size="selectPageSize"
                    :page-sizes="[5, 10, 15, 50, 100]"
                    layout="prev, pager, next, jumper, sizes, total"
                    v-if="selectTotalCount"
                    :total="selectTotalCount"
                  ></el-pagination>
                </div>
              </el-select>
            </el-form-item>

remoteMethod

css
remoteMethod: debounce(async function (query) {
      const _this = this;
      _this.loading = true;
      const params = { pageNo: this.selectPageNo, pageSize: this.selectPageSize };
      if (query && query.trim() !== '') {
        if (this.times === 0) {
          params.pageNo = 1;
          this.times++;
        }
        this.searchQuery = query.trim();
        params.storeNameOrNo = query.trim();
      } else {
        this.storeOptions = [];
      }
      const { data, success, totalCount } = await labelApi.queryStoreList(params);
      if (success) {
        _this.storeOptions = data;
        this.selectTotalCount = totalCount;
      }
      _this.loading = false;
    }, 400),
remoteMethod: debounce(async function (query) {
      const _this = this;
      _this.loading = true;
      const params = { pageNo: this.selectPageNo, pageSize: this.selectPageSize };
      if (query && query.trim() !== '') {
        if (this.times === 0) {
          params.pageNo = 1;
          this.times++;
        }
        this.searchQuery = query.trim();
        params.storeNameOrNo = query.trim();
      } else {
        this.storeOptions = [];
      }
      const { data, success, totalCount } = await labelApi.queryStoreList(params);
      if (success) {
        _this.storeOptions = data;
        this.selectTotalCount = totalCount;
      }
      _this.loading = false;
    }, 400),

onSelectPageSizeChange

css
// 下拉框页数
    onSelectPageSizeChange(val) {
      this.selectPageSize = val;
      this.selectPageNo = 1; // allPositionList
      this.remoteMethod(this.searchQuery);
    },
// 下拉框页数
    onSelectPageSizeChange(val) {
      this.selectPageSize = val;
      this.selectPageNo = 1; // allPositionList
      this.remoteMethod(this.searchQuery);
    },

onSelectPageNumChange

css
// 下拉框页码
    onSelectPageNumChange(val) {
      this.selectPageNo = val;
      this.remoteMethod(this.searchQuery);
    },
// 下拉框页码
    onSelectPageNumChange(val) {
      this.selectPageNo = val;
      this.remoteMethod(this.searchQuery);
    },

Released under the MIT License.