基于elementUi，下拉分页组件封装

一、说明

​ 虽然elementUi提供了丰富的组件，但是有些业务场景下，需要自己再封装适合自己的业务的组件，例如：支持分页、过滤、远程搜索的下拉组件。组件效果如下：

​

二、组件封装

1、组件 PaginationSelect.vue 代码

<template>
  <el-select v-model="childSelectedValue"
             :filterable="remote"
             :loading="loading"
             :remote="remote"
             :size="size"
             :remote-method="remoteMethod"
             :clearable="clearable"
             @change="handleChange"
             @clear="handleClear"
             @focus="handleFocus"
             :placeholder="placeholder">
    <el-option
      v-for="item in optionSource"
      :key="item[valueKey]"
      :label="item[labelKey]"
      :value="item[valueKey]">
    </el-option>

    <el-pagination
      small
      layout="prev, pager, next"
      @current-change="changeNumber"
      :hide-on-single-page="true"
      :page-size="paginationOption.pageSize"
      :current-page="paginationOption.currentPage"
      :pager-count="paginationOption.pagerCount"
      :total="paginationOption.total">
    </el-pagination>
  </el-select>
</template>

<script>

export default {
  name: 'PaginationSelect',
  props: {
    //此参数只是为了父组件实现 v-model指令接受参数用，子组件中无实际意义
    // 在子组件中通过监听childSelectedValue值，来触发 input 事件，实现子父组件数据绑定
    value:{
      type:String,
      default: ''
    },
    valueKey:{//传入的option数组中，要作为最终选择项的键值名称
      type:String
    },
    labelKey:{//传入的option数组中，要作为显示项的键值名称
      type:String
    },
    clearable	:{//是否支持清除，默认支持
      type:Boolean,
      default:true
    },
    remote:{//是否支持远程搜索，默认支持
      type:Boolean,
      default:false
    },
    size:{//组件尺寸，配置项同select  String | medium/small/mini
      type:String,
      default:'medium'
    },
    loading:{//远程数据加载状态显示
      type:Boolean,
      default:false
    },
    placeholder	:{
      type:String,
      default:'请选择'
    },
    optionSource:{//下拉框组件数据源
      type:Array,
      required:true
    },
    paginationOption:{//分页配置项
      type:Object,
      default:function () {
          return {
              pageSize:6,//每页显示条数  6条刚好
              currentPage:1,//当前页
              pagerCount:5,//按钮数，超过时会折叠
              total:5 //总条数
          }
      }
    }
  },
  data () {
    return {
      childSelectedValue:this.value,
    }
  },
  watch:{
    //监听子组件中选择的值得变化，每当选择一个项后，触发input事件，
    // 将子组件中选择的值通过input事件传递给父组件，实现父组件中v-model绑定的值的双向绑定
    childSelectedValue(val){
      this.$emit("input",val);
    },
    value(val){
      if(val!=null && val.length<1){
          this.childSelectedValue = '';
      }
    }
  },
  mounted(){
  },
  methods:{
    changeNumber(val){//子组件分页器，页码选择事件，父组件中监听子组件的 pageNationChange 事件，获取当前页码
      this.$emit("pageNationChange",val);
    },
    remoteMethod(val){ // 远程调用方法，在父组件中实现远程方法
      if(val!=null && val.length>0){
        //只有输入的字符串长度大于1时，触发
        this.$emit("remote-method",val);
      }else{
        this.childSelectedValue = ' '
      }
    },
    handleChange(val){
      //使组件支持change事件
      this.$emit("change",val);
    },
    handleClear(val){
      //使组件支持clear事件
      this.$emit("clear",val);
    },
    handleFocus(){
      //解决远程搜索无结果时，显示清除按钮问题
      if(this.childSelectedValue.length<1){
        this.childSelectedValue = ''
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

2、属性

参数	说明	类型	可选值	默认值
value	在子组件中，通过v-model绑定的值	String	-	‘ ’
labelKey	optionSource数据源中，要作为下拉项名称的键值（key）	String	-	-
valueKey	optionSource数据源中，要作为下拉项选择后的值的键值（key）	String	-	-
clearable	可清除选择内容	boolean	-	true
remote	是否支持远程搜索	boolean	-	false
size	组件尺寸（同select组件）	String	medium/small/mini	medium
loading	远程数据加载状态显示	boolean	-	true
placeholder	提示文字	String	-	请选择
optionSource	下拉组件的数据源（类型为数组）	Array	-	[]
paginationOption	分页配置项	Object	-	{ pageSize:6, currentPage:1, pagerCount:5, total:5 }

3、事件/方法

事件名称	说明	回调参数
pageNationChange	分页组件页码改变时触发	改变后的页码
remote-method	远程搜索，只有remote为true时，有效	输入的值
change	选项发生变化时触发	目前的选中值
clear	使组件支持clear事件	-

三、组件引入、使用

引入

//在其他 .vue组件中引入(路径根据实际情况修改)
import PaginationSelect from "@/.....components/PaginationSelect"

使用

//在组件的components处声明名称
export default {
        components: {
            PaginationSelect
        },
        data() {
            return {
                //测试数据源
                cabinateOptions:[
                    {guid:'655445fdf5455545dfd',cabinetname:'测试名称1'},
                    {guid:'dfeg445fdf545554dfu',cabinetname:'测试名称2'},
                    ......
                ],
                //测试对象，接收组件值
                queryParam:{
                    cabinetGuid:''
                }
            }
        }
    ......
}

<pagination-select
     :optionSource="cabinateOptions"
     v-model="queryParam.cabinetGuid"
     labelKey="cabinetname"
     valueKey="guid"
     >
</pagination-select>

如上，可以根据自己需要，来使用组件的其他属性、方法，比如在clear/change 等事件中，做一些其他的事。

注意：

​ 1、如果开启 remote=“true” 选项后，组件支持远程搜索，此时下拉组件后面上下箭头的图标被隐藏了。