vue--下拉框，分页+模糊查询

饿了么

 

<template slot-scope="scope">
     <el-form-item :prop="'addMaterialSpecMdList.'+scope.$index + '.materialSpecMdCode'"
                   :rules="rules.materialSpecCode">
         <el-select v-model="scope.row.materialSpecMdCode"
                      filterable remote
                      :remote-method="findMaterialSpec"
                      placeholder="请选择"
                      clearable
                      @click.native="resetPage"
                     >
              <el-option
                      small
                      v-for="item in materialSpecMdList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
              <el-pagination small
                      :total="totalNumMaterialSpec"
                      :current-page.sync="pageNumMaterialSpec"
                      :page-size="pageSizeMaterialSpec"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      layout="total, prev, pager, next"
                    >
              </el-pagination>
        </el-select>
     </el-form-item>
</template>

 // 主数据货物规格
      findMaterialSpec(query) {
        this.materialSpecQuery = query;
        let optionMaterialSpec = {
          pageNum: 1,
          pageSize: 15,
          materialSpecName: query
        }
        console.log(optionMaterialSpec)
        getMaterialSpecMd(optionMaterialSpec).then(res => {
          console.log(res.data)
          this.materialSpecMdList = [];
          this.totalNumMaterialSpec = res.data.total;
          for (const type of res.data.rows) {
            this.materialSpecMdList.push({value: type.materialSpecCode, label: type.materialSpecName})
          }
          console.log(this.materialSpecMdList)
        })
      },

handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.pageSizeMaterialSpec = val;
      },
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        this.pageNumMaterialSpec = val;
        console.log(this.pageNumMaterialSpec)
        let optionMaterialSpec = {
          pageNum: this.pageNumMaterialSpec,
          pageSize: 15,
          materialSpecName: this.materialSpecQuery
        };
        console.log(optionMaterialSpec)
        getMaterialSpecMd(optionMaterialSpec).then(res => {
          console.log(res.data)
          this.materialSpecMdList = [];
          this.totalNumMaterialSpec = res.data.total;
          for (const type of res.data.rows) {
            this.materialSpecMdList.push({value: type.materialSpecCode, label: type.materialSpecName})
          }
          console.log(this.materialSpecMdList)
        })
      },

resetPage(){
        console.log("resetPage")
        this.pageNumMaterialSpec = 1;
        console.log(this.pageNumMaterialSpec)
        this.getMaterialSpecMdList();
      },

本公司自己封的，我也不知道啊

<el-select
            v-model="queryParams.modelId"
            filterable remote
            :remote-method="queryModel"
            :loading="loading"
            @change="changeQueryModel"
            @clear="clearQueryModel"
            placeholder="模型名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          >
            <el-option small
                       v-for="item in options.queryModelOptions"
                       :key="'queryModelKey'+item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
            <pagination small
                        v-show="totals.queryModelTotal>selectPageSize"
                        :total="totals.queryModelTotal"
                        :page.sync="pageNum.queryModelPage"
                        :limit.sync="selectPageSize"
                        layout="prev, pager, next"
                        @pagination="queryModelPage"
            />
          </el-select>