antdv a-table的分页pagination如何配置

antdv的a-table分页默认只有左右箭头和数字分页，要实现下面的效果，必须配置自定义分页：

废话不多说，直接上代码：

<a-table
   ref="table"
    :rowKey="(record) => record.id"
    :pagination="{
        current: table.pageNumber,
        defaultPageSize: 10,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '40'],
        showTotal: (total,range) => `${range[0]}-${range[1]}共${total}条`,
        onShowSizeChange: (current, pageSize) =>{table.pageSize = pageSize; table.pageNumber = 1},
        onChange: (pageNumber) => table.pageNumber = pageNumber
    }"
    :defaultExpandAllRows="true"
    :columns="columns"
    :dataSource="loadData"
    showPagination="auto"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
    <span slot="action" slot-scope="text, record">
        <a href="javascript：;" @click="$refs.editForm.edit('编辑',record)">编辑</a>
        <a-divider type="vertical"/>
        <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => mainDelete(record)">
            <a>删除</a>
        </a-popconfirm>
    </span>
</a-table>

data配置：

data(){
  return {
   table:{
    pageNumber:1,
    pageSize:10
   }
   }
}