Ant Design Vue table组件如何自定义分页器

<a-table
  :pagination="false"
>
</a-table>

<a-pagination
  v-model="current"
  show-size-changer
  :page-size.sync="pageSize"
  :total="total"
  :show-total="total => `总数 ${total} 条`" 
/>

data () {
    return {
      total:0,
      pageSize: 10,
      current: 1
},
watch: {
    // 监听条数的改变
    pageSize(val) {
      console.log('pageSize', val);
      this.pageSize = val
      this.current = 1
      this.getRtSignByPage()
    },
    // 监听页数的改变
    current(val) {
      console.log('current', val);
      this.current = val
      this.getRtSignByPage()
    },
},
mounted () {
    this.getRtSignByPage()
},
methods: {
    // 按条件分页查询
    async getRtSignByPage () {
      let { data } = await getMenuPages({
        current:this.current,
        size:this.pageSize
      })
      this.data = data.data.records
      this.total = data.data.total
    }
}

 <a-table 
     :data-source="data"
	:columns="columns" 
	:pagination="pagination"
    >
        <template slot="address" >
        <div >
            <span>
            <a @click="ClickDetail">详情</a>
            </span>
        </div>
        </template>
    </a-table>

 data(){ 
    return{
        data,
      columns, 
       currentPage:Number(sessionStorage.getItem('currentPage')) || 1,,
      pagination: 
      { 
            pageSize: 5, // 默认每页显示数量
            defaultCurrent: Number(sessionStorage.getItem('currentPage')) || 1, // 默认当前页数
            showSizeChanger: true, // 显示可改变每页数量
            pageSizeOptions: ['5', '10', '20', '50'], // 每页数量选项
            showTotal: total => `Total ${total} items`, // 显示总数
            showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改变每页数量时更新显示
         // 改变页数时时触发函数
            onChange: (current) => {
                this.currentPage = current;     
            }
     }
  }
},

 //  点击详情事件
    ClickDetail(){
         sessionStorage.setItem('currentPage',this.currentPage) 
//  下面是自己的具体的页面逻辑，即跳转路由的操作
         this.$route.xxxxxx
    }