feature: pagination

pages/index.vue

@@ -54,7 +54,9 @@
         </div>
       </div>
       <div class="layout-content">
-        <nuxt-child keep-alive :datalist="searchList" to="/song" />
+        <a-config-provider :locale="locale">
+          <nuxt-child keep-alive :datalist="searchList" to="/song" />
+        </a-config-provider>
       </div>
     </a-layout-content>
     <a-layout-footer style="text-align: center">
@@ -65,6 +67,7 @@
 
 <script>
 import csvToJson from 'csvtojson'
+import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
 
 const testDataList = []
 for (let i = 0; i < 100; i++) {
@@ -80,6 +83,7 @@ export default {
   name: 'IndexPage',
   data () {
     return {
+      locale: zhCN,
       selectionDefaultValue: 'all',
       inputVal: '',
       songListData: [],

pages/index/song.vue

@@ -36,7 +36,11 @@ export default {
       showLoadingMore: true,
       pagination: {
         onChange: page => this.onPageChange(page),
-        pageSize: 18,
+        pageSize: 10,
+        showSizeChanger: true,
+        pageSizeOptions: ['10', '20', '30', '40', '50'],
+        showTotal: total => `共 ${total} 首歌曲`,
+        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
         style: {
           textAlign: 'center !important',
           display: 'flex',
@@ -67,11 +71,19 @@ export default {
       ]
     }
   },
-  mounted () {},
+  mounted () {
+    const currentPageSize = localStorage.getItem('pageSize')
+    if (currentPageSize !== null) {
+      this.pagination.pageSize = currentPageSize
+    }
+  },
   methods: {
     onPageChange (current) {
       console.log(current)
     },
+    onSizeChange (current, pageSize) {
+      localStorage.setItem('pageSize', pageSize)
+    },
     rowClick (record, index) {
       return {
         on: {