ant-design-vue的a-table组件分页功能实现（原创前端若水）

  <a-table
        :pagination="myCustomerTablePageConfig"
        @change="myCustomerTablePageChange"
      >
  </a-table>

 data() {
    return {
         // 筛选表格分页配置对象
      myCustomerTablePageConfig: {
        // 总数据
        total: 0,
        // 每页条数
        pageSize: 10,
        // 当前页
        current: 1,
        // 显示多少页
        showTotal: (total) => `共有 ${total} 条`,
        // 是否显示跳转页面
        showQuickJumper: true,
        // 是否开启分页数据条数
        showSizeChanger: true,
        // 分页每页显示条数
        pageSizeOptions: ['1', '10', '20', '40', '80', '100'],
      },
    }
  },
  methods: {
        /**
     * @function 表格分页变化
     */
    myCustomerTablePageChange(pagination) {
      let { current, pageSize } = pagination
      this.myCustomerTablePageConfig = Object.assign(this.myCustomerTablePageConfig, { current, pageSize })
    },
  },