分页整理

src/views/order/Index.vue

@@ -215,8 +215,15 @@
       <div v-if="orderList.data.length" class="pagination">
         <a-pagination
           :current="page"
-          :pageSize="orderList.per_page"
+          :default-page-size="pageSizes"
+          :pageSizes="pageSizes"
           :total="orderList.total"
+          :showSizeChanger='true'
+          :showQuickJumper='true'
+          :pageSizeOptions='pageSizeOptions'
+          :layout="'total, sizes, prev, pager, next, jumper'" 
+          :showTotal="showTotal"
+          @showSizeChange="handleSizeChange"
           @change="onChangePage"
         />
       </div>
@@ -326,8 +333,11 @@ export default {
       columns,
       // 当前页码
       page: 1,
+      pageSizes:15,
       // 列表数据
-      orderList: { data: [], total: 0, per_page: 10 },
+      orderList: { data: [], total: 0},
+      pageSizeOptions:['15', '30', '50'],
+      showTotal: (total) => `共 ${total} 条记录`, // 显示总数
       // 自提门店列表
       shopList: []
     }
@@ -383,7 +393,7 @@ export default {
     getList () {
       const { dataType, queryParam, page } = this
       this.isLoading = true
-      return Api.list({ dataType, ...queryParam, page })
+      return Api.list({ dataType, ...queryParam, page,pageSize:this.pageSizes })
         .then(response => {
           this.orderList = response.data.list
         })
@@ -428,11 +438,16 @@ export default {
     },
 
     // 翻页事件
-    onChangePage (current) {
+    onChangePage (current, size) {
       this.page = current
+      this.pageSizes = size
+      this.handleRefresh()
+    },
+    handleSizeChange(current, size){
+      this.page = current
+      this.pageSizes = size
       this.handleRefresh()
     },
-
     // 删除记录
     handleDelete (item) {
       const app = this