分页antd

<template>
  <div class="pagination-container">
    <div class="flex flex-sb flex-a">
      <div v-if="total !== 0">
        <span>共{{ total }}条 </span>
        <span v-if="hasPageSizeSelect" style="margin-right: 4px"> 每页</span>
        <a-select
            v-if="hasPageSizeSelect"
            v-model="pageSize"
            :pageSizeOptions="option"
            style="width: 70px"
            @change="handleChange"
        >
          <a-select-option v-for="item in option" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
        <span v-if="hasPageSizeSelect" style="margin-left: 4px">条</span>
      </div>
      <a-config-provider :locale=locale>
      <a-pagination
          :current="current"
          :hideOnSinglePage="hideOnSinglePage"
          :pageSize="pageSize"
          :total="total"
          show-quick-jumper
          @change="onChange"
      />
      </a-config-provider>
    </div>
  </div>
</template>

<script>
import zh_CN from "ant-design-vue/lib/locale/zh_CN";
export default {
  props: {
    total: {
      type: Number,
      default: 0,
    },
    current: {
      type: Number,
      default: 0,
    },
    option: {
      type: Array,
      default() {
        return [10, 20, 50, 100];
      },
    },
    hideOnSinglePage: {
      type: Boolean,
      default: false,
    },
    hasPageSizeSelect: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      pageSize: 10,
      locale:zh_CN,
      pageName:0
    };
  },
  mounted() {
    // 改变类型 只能输入数字
    let nameInput = document.querySelector('.ant-pagination-options-quick-jumper > input') || {}
    nameInput.type='number'
  },
  methods: {

    handleChange(e) {
      this.$emit("pageSizeChange", e);
    },
    onChange(e) {
      this.$emit("currentPageChange", e);
    },
  },
};
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.ant-pagination-item-active {
  border: none;
  background-color: @color-primary;
  color: #fff;

  a {
    color: #fff;
  }
}
.pagination-container {
  padding: 23px 0;
}
</style>
=============================

<Pagination
    v-if="tableData.length > 0"
    :current="params.pageNum"
    :total="total"
    @currentPageChange="currentPageChange"
    @pageSizeChange="pageSizeChange"

/>
==============================

pageSizeChange(e) {
  this.params.pageSize = e;
},
currentPageChange(e) {
  this.params.pageNum = e;
},