vue-antd Select加入分页

 子组件：

<template>
  <a-select
    v-model="value"
    :placeholder="placeholder"
    :allow-clear="true"
    @change="chooseOption"
    class="width195"
    showSearch
    :filter-option="filterOption"
  >
    <div slot="dropdownRender" slot-scope="menu">
      <v-nodes :vnodes="menu" />
      <a-divider style="margin: 4px 0" />
      <div
        style="padding: 4px 8px; cursor: pointer; float: left"
        @mousedown="(e) => e.preventDefault()"
        @click="changePage(0)"
      >
        上一页
      </div>
      <div style="width: 79px; cursor: pointer; float: left; text-align: center; padding: 4px 0px">
        {{ nowPage }}/{{ maxPage }}
      </div>
      <div
        style="padding: 4px 8px; cursor: pointer; float: right"
        @mousedown="(e) => e.preventDefault()"
        @click="changePage(1)"
      >
        下一页
      </div>
    </div>
    <a-select-option v-for="(item, index) in selectList" :key="index" :value="item[valueKey]"
      >{{ item[labelKey] }}
    </a-select-option>
  </a-select>
</template> 
<script>
export default {
  name: 'selectPage',
  props: {
    // 下拉框总数据
    list: {
      type: Array,
      require: true,
    },
    total: {
      type: Number,
      require: true,
    },
    page: {
      type: Number,
      require: true,
    },
    pageSize: {
      type: Number,
    },
    // 提示
    placeholder: {
      type: String,
      default: '请选择',
    },
    // 下拉框显示值
    labelKey: {
      type: String,
    },
    // 下拉框value
    valueKey: {
      type: String,
    },
    // 默认值
    value: {
      type: String,
    },
  },
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {}
  },
  computed: {
    selectList() {
      return this.list
    },
    maxPage() {
      return Math.ceil(this.total / this.pageSize)
    },
    nowPage() {
      return this.page
    },
  },
  methods: {
    // 清空数据
    clearValue() {
      this.value = ''
    },
    // 换页事件，0切换到上一页，1切换到下一页
    changePage(status) {
      this.$emit('changePage', status)
    },
    // 选择下拉框时进行父传子
    chooseOption(value) {
      this.$emit('change', value)
    },
    // 下拉框筛选
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
  },
}
</script>
 
<style scoped>
</style>

有业务需要使用到下拉框分页，网上没有找到比较详细的封装好的组件，凑了凑封装了一个

父组件： 

<selectPage
              :list="timeZoneDropdownList"
              labelKey="standardName"
              valueKey="id"
              @change="selectTimeZone"
              @changePage="selectTimeZonePage"
              :value="addCustomer.timeZoneId"
              :pageSize="selectPage.pageSize"
              :page="selectPage.page"
              :total="selectPage.total"
            ></selectPage>