el-select 下拉分页

 //父组件

<newpageselect  

          ref="newpageselect"

          @getTypeList="getTypeList"

          @selectPageChange="selectPageChange"

          :diseaseTypelist="diseaseTypelist"

          :selectLabelkey="'dictLabel'"

          :selectvaluekey="'dictSort'"

          :selectvalue="form.diseaseTypeCode"

          :zdParameters="zdParameters">

          </newpageselect>

//引入组件

import newpageselect from '@/views/components/component/selectPage.vue';

components: {

    newpageselect,

  },

//新增修改  刷新数据

this.$nextTick(() => {

        this.$refs.newpageselect.getresult()

      })

//子组件

<template>

    <el-row>

      <el-col :span="24">

        <!-- <el-select v-model="selectVal" filterable clearable

         placeholder="请选择"  @change="changeValue"

         :style="'width:100%'"> -->

         <el-select v-model="selectVal" 

            filterable

            remote

            reserve-keyword

            placeholder="请输入关键词"

            :remote-method="remoteMethod"

            @change="changeValue"

            :style="'width:100%'">

          <el-option

            v-for="item in dataList"

            :key="item[selectvaluekey]"

            :label="item[selectLabelkey]"

            :value="item[selectvaluekey]"

            >

          </el-option>

          <el-col :span="24">

            <div class="bottomPage">

            <!-- //分页组件 //翻页改变方法  //pageNum页数，pageSize每页显示数量，total总数 -->

              <el-pagination

                @current-change="handleCurrentChange"

                :current-page="entityPageInfo.pageNum"

                :page-size="entityPageInfo.pageSize"

                layout="total, prev, pager, next"

                :total="entityPageInfo.total">

              </el-pagination>

            </div>

          </el-col>

        </el-select>

      </el-col>

    </el-row>

</template>

<script>

export default {

  name: "SelectPage",

  //接收参数

  props:{

    //参数

    zdParameters:{

      type:Object,

      require:''

    },

    //el-option label展示字段名

    selectLabelkey: {

      type: String,

      default: ''

    },

    //el-option label展示字段值

    selectvaluekey: {

      type: String,

      default: ''

    },

    //回显数据

    selectvalue: {

      type: String,

      default: ''

    },

    //结果集

    diseaseTypelist: {

      type: Array,

      default: () => {

        return [];

      }

    },

  },

  

  data() {

    return {

      selectVal:"",

      dataList:[],

      entityPageInfo:{},

      list: [],

      loading: false,

    };

  },

  mounted(){

  },

  methods:{

    // 列表

    getresult(){

       this.selectVal=this.selectvalue,

        this.dataList=this.diseaseTypelist,

        this.entityPageInfo=this.zdParameters,

        console.log(this.dataList,"===============dataList")

        console.log(this.zdParameters,"===============entityPageInfo")

        console.log(this.selectvalue,"===============selectvalue")

    },

    //翻页

    handleCurrentChange(val) {

     //val获取点击页数，赋值刷新接口数据

      this.entityPageInfo.pageNum = val

    //   this.getList()

      this.$emit('getTypeList',this.entityPageInfo);

    },

    changeValue(e){

      this.selectVal = e

      //e获取选择code 给父页面

      this.$emit('selectPageChange',e);

    },

    remoteMethod(value) {

        console.log(value,"==11=======")

      this.entityPageInfo.keywords = value

      this.$emit('getTypeList',this.entityPageInfo);

    },

  }

};

</script>

<style scoped>

.bottomPage{display: flex;margin-bottom: 10px;padding: 0px 5px;}

</style>