elementUI下拉框分页加远程搜索组件封装

<template>
  <el-select v-model="copyValue"
             :disabled="disabled"
             filterable
             clearable
             remote
             @clear="selectClear"
             placeholder="请选择"
             @change="updateValue"
             :remote-method="remoteMethod"
             @focus="focusMethod">
    <el-option
      v-for="item in dataList"
      :key="item[valueKey]"
      :label="item[labelKey]"
      :value="item[valueKey]"
    >
    </el-option>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      layout=" prev, pager, next,total"
      :total="pageInfo.total">
    </el-pagination>

  </el-select>
</template>

<script>
export default {
  name: "paginationSelect",
  props: {
    //绑定值
    value: String,
    //下拉列表
    dataList: Array,
    //option的label在列表中对应的key
    labelKey: String,
    //option的value在列表中对应的key
    valueKey: String,
    //分页信息
    pageInfo: Object,
    disabled: false,
    elSelectClass: Boolean,
  },
  watch: {
    value: {
      handler: function (val) {
        this.copyValue = val;
      },
      deep: true
    }
  },
  methods: {
    //更新值
    updateValue(val) {
      this.$emit('selectChange', this.copyValue);
    },
    remoteMethod (query) {
      this.copyValue = query;
      this.$emit('remoteSearch', query);
    },
    focusMethod () {
      if (!this.dataList || (this.dataList && this.dataList.length == 0)) {
        this.filterMethod();
      }
    },
    //清楚输入框内容
    selectClear () {
      this.$emit('selectPageChange', 1, this.pageInfo.pageSize, "clear");
    },
    //翻页
    handleCurrentChange(currenPageNo) {
      this.$emit('selectPageChange', currenPageNo, this.pageInfo.pageSize);
    }
  },
  data() {
    return {
      copyValue: this.value
    };
  }
};
</script>

<style scoped>
.elPaginationSelect {
  width: 100%;
  border: none !important;
}

.el-input input {
  border: none !important;
  width: 100%;
}

</style>

效果如下：