基于Vue，Element-ui的分页下拉组件

基于vue，Element-ui的分页下拉组件
由于工作项目中用到了分页下拉，切项目前端主要使用Vue和Element-Ui开发,因此重新写了个分页下拉组件，使用简单，鉴于不同用途下，各个后端连接不同，返回结果不定，各属性对应Key不定，因此调用方需要自己提供数据列表，分页信息，查询方法，并传入相关key。话不多说，直接上代码：
组件核心代码

<template>
    <el-row>
      <el-col :span="24">
        <el-select v-model="copyValue" filterable clearable  placeholder="请选择" @change="updateValue" :style="'width:100%;min-width:250px'">
          <el-option
            v-for="item in dataList"
            :key="item.value"
            :label="item[labelKey]"
            :value="item[valueKey]">
          </el-option>
          <el-col :span="24">
            <div style="float: right;margin-right:10px;padding-bottom: 10px">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum"
                :page-size="pageInfo.pageSize"
                layout="total, prev, pager, next"
                :total="pageInfo.total">
              </el-pagination>
            </div>
          </el-col>
        </el-select>
      </el-col>
    </el-row>
</template>

<script>
export default {
     
  name: "NewPageSelect",
  props:{
     
    //绑定值
    value:String,
    //下拉列表
    dataList:Array,
    //option的label在列表中对应的key
    labelKey:String,
    //option的value在列表中对应的key
    valueKey:String,
    //分页信息
    pageInfo:Object
  },
  watch:{
     
    value:{
     
      handler:function(val){
     
        this.copyValue=val;
      },
      deep:true
    }
  },
  methods:{
     
    //更新值
    updateValue(){
     
      this.$emit('update:value',this.copyValue);
    },
    //翻页
    handleCurrentChange(val) {
     
      this.$emit('selectPageChange',val);
    }
  },
  data() {
     
    return {
     
      copyValue:this.value
    };
  }
};
</script>

<style scoped>

</style>

调用方

 <template>
  <div>
    <new-page-select :value.sync="copyValue"
                     @selectPageChange="entityPageSearch"
                     :valueKey="'id'"
                     :labelKey="'entityName'"
                     :pageInfo="entityPageInfo"
                     :dataList="entityDataTable">
    </new-page-select>
  </div>
</template>

<script>
import NewPageSelect from '@/components/common/pageSelect/NewPageSelect';
export default {
     
  name: "EntitySelectPage",
  data(){
     
    return {
     
      //父实例下拉框的数据
      entityPageInfo:{
     
        pageNum:1,
        pageSize:5,
        total:0,
        param:{
     
          classId: '',
          classVersionId: ''
        },
      },
      //复制值
      copyValue:this.value,
      //父实例下拉框的数据
      entityDataTable:[]
    };
  },
  props:{
     
    value:String,
    classId:String,
    classVersionId:String
  },
  watch:{
     
    //监听copyValue值变化
    copyValue:{
     
      handler (newV, oldV) {
     
        this.$emit('update:value',this.copyValue);
      },
      deep:true
    }
  },
  methods:{
     
    //父实例翻页
    parentEntityPageChange(val){
     
      this.selectPageInfo.pageNum=val;
      this.selectPageSearch();
    },
    //父实例查询
    entityPageSearch(){
     
      if (this.classId){
     
        this.entityPageInfo.param.classId=this.classId;
      }
      if (this.classVersionId){
     
        this.entityPageInfo.param.classVersionId=this.classVersionId;
      }
      this.$post('/data/obj/entity/pageEntityAllPath',this.entityPageInfo).then(res=>{
     
        if (res.code==='1000') {
     
          this.entityDataTable=res.data.result;
          this.entityPageInfo.param.total=parseInt(res.data.totalRecord);
        }else {
     
          this.$message.error(res.msg);
        }
      });
    },
  },
  mounted(){
     
    this.entityPageSearch();
  },
  components:{
     
    NewPageSelect
  }
};
</script>

<style scoped>

</style>

    

效果图


个人能力有限，做的不好的请不吝赐教。