ant-design-vue Table組件和分頁組件的自定義

最近在個新項目裏開發CMS端，vue技術棧和antd的UI框架
表格table使用連接：antd的table
分頁pagination使用連接：antd的pagination

表格單獨使用時，自帶簡單分頁，只包含 上一頁, 頁面碼, 下一頁,例如：

可是有時候產品和甲方的需求很奇葩，非得可選的pageSize，顯示總數等功能，文檔裏有時候也闡述不全，甚至不對，關鍵時候還要靠本身動動腦子，看代碼：

//template部分
 <a-table :pagination="pagination"
             :rowSelection="rowSelection"
             :columns="columns"
             :dataSource="dataList"
             @change="TableChange"
             rowKey="id"
    >

data(){
     return{
         pagination:{
              defaultPageSize:5,
              showTotal: total => `共 ${total} 條數據`,
              showSizeChanger:true,
              pageSizeOptions: ['5', '10', '15', '20'],
              onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize
            }
        }
    },

defaultPageSize 設置默認一頁table裏多少個條目

showTotal 用於顯示數據總量和當前數據順序

showSizeChanger:true 是否能夠改變 pageSize，這個很重要必定要加上，不少網上的教程裏都沒寫

pageSizeOptions 以arr形式設置每頁能夠展現多少條的選項

onShowSizeChange:()=>{} 點擊切換每頁能夠展現多少條的下拉框，會觸發這個方法,能夠理解爲監聽「xx條/頁」下拉框的方法，網上不少文章都是用showSizeChange，實踐證實並不能用，文檔上也沒寫明「onShowSizeChange」這個方式，因此在這要跟你們強調一下。