下拉框(el-select)带分页

下拉框(el-select)带分页

这个功能我是以一个组件的形式实现的

父级页面

 <newPageSelect  ref="newPageSelect" @selectPageChange="selectPageChange" 
 :getUrl="getUrl" :serialNumber="serialNumber"></newPageSelect>

//引入组件
import newPageSelect from '@/views/components/selectPage';
//注册组件
components: {
   newPageSelect
},
return {
  //传给子组件的参数
  getUrl:{
    url:'接口请求地址',
     method:'get',
     //分页所需参数
     params:{
       pageNum:1,
       pageSize:6,
       total:0,
     },
   },
   //动态设置 el-option展示的字段名
   serialNumber:'',
}
methods: {
   selectPageChange(e){
     //选择的code
	  console.log('e--->',e)
   },
}

## 子组件

<template>
    <el-row>
      <el-col :span="24">
        <el-select v-model="selectVal" filterable clearable
         placeholder="请选择"  @change="changeValue"
         :style="'width:100%'">
          <el-option
            v-for="item in dataList"
            :key="item.code"
            :label="item[selectLabel]"
            :value="item.code"
            >
          </el-option>
          <el-col :span="24">
            <div class="bottomPage">
            //分页组件
              <el-pagination
              	//翻页改变方法
                @current-change="handleCurrentChange"
                //pageNum页数，pageSize每页显示数量，total总数
                :current-page="this.entityPageInfo.pageNum"
                :page-size="this.entityPageInfo.pageSize"
                layout="total, prev, pager, next"
                :total="this.entityPageInfo.total">
              </el-pagination>
            </div>
          </el-col>
        </el-select>
      </el-col>
    </el-row>
</template>

``

<script>
import request from '@/utils/request'
export default {
  name: "SelectPage",
  //接收参数
  props:{
  	//请求地址
    getUrl:{
      type:Object,
      require:true
    },
    //el-option label展示字段名
    selectLabel: {
      type: String,
      default: 'serialNumber'
    }
  },
  data() {
    return {
      selectVal:'',
      dataList:[],
      entityPageInfo:this.getUrl.params,
      list: [],
      loading: false,
    };
  },
  mounted(){
    this.getList()
  },
  methods:{
    // 列表
    getList(){
       //this.getUrl 父组件接收的接口地址 这样设计利于不同页面使用 更灵活
       return request(this.getUrl).then(res => {
        this.dataList = res.data.records
        this.entityPageInfo.total=parseInt(res.data.total);
      })
    },
    //翻页
    handleCurrentChange(val) {
     //val获取点击页数，赋值刷新接口数据
      this.entityPageInfo.pageNum = val
      this.getList()
    },
    changeValue(e){
      this.selectVal = e
      //e获取选择code 给父页面
      this.$emit('selectPageChange',e);
    },
    remoteMethod(query) {
      this.getUrl.params.keywords = query
      if (query !== '') {
        this.getList()
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.dataList = this.list.filter(item => {
            return `${item[this.selectVal]}`.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.dataList = [];
      }
    }
  }
};
</script>

<style scoped>
.bottomPage{display: flex;margin-bottom: 10px}
</style>

根据以上内容 这个功能就实现了