diff --git a/src/views/apps/dealer/order/Index.vue b/src/views/apps/dealer/order/Index.vue
index 856ebc8..596a979 100644
--- a/src/views/apps/dealer/order/Index.vue
+++ b/src/views/apps/dealer/order/Index.vue
@@ -184,8 +184,15 @@
       <div v-if="orderList.data.length" class="pagination">
         <a-pagination
           :current="page"
-          :pageSize="orderList.per_page"
+          :default-page-size="pageSize"
+          :pageSizes="pageSize"
           :total="orderList.total"
+          :showSizeChanger="true"
+          :showQuickJumper="true"
+          :pageSizeOptions="pageSizeOptions"
+          :layout="'total, sizes, prev, pager, next, jumper'"
+          :showTotal="showTotal"
+          @showSizeChange="handleSizeChange"
           @change="onChangePage"
         />
       </div>
@@ -279,8 +286,11 @@ export default {
       columns,
       // 当前页码
       page: 1,
+      pageSize: 15,
+      pageSizeOptions: ['15', '30', '50'],
+      showTotal: (total) => `共 ${total} 条记录`, // 显示总数
       // 列表数据
-      orderList: { data: [], total: 0, per_page: 10 }
+      orderList: { data: [], total: 0}
     }
   },
   beforeCreate () {
@@ -324,7 +334,7 @@ export default {
     getList () {
       const { queryParam, page } = this
       this.isLoading = true
-      return Api.list({ ...queryParam, page })
+      return Api.list({ ...queryParam, page,pageSize:this.pageSize })
         .then(response => {
           this.orderList = response.data.list
         })
@@ -367,12 +377,17 @@ export default {
     handleReset () {
       this.searchForm.resetFields()
     },
-
-    // 翻页事件
-    onChangePage (current) {
+       // 翻页事件
+    onChangePage(current, size) {
       this.page = current
+      this.pageSize = size
       this.handleRefresh()
-    }
+    },
+    handleSizeChange(current, size){
+      this.page = current
+      this.pageSize = size
+      this.handleRefresh()
+    },
 
   }
 }
diff --git a/src/views/market/presale/Index copy 2.vue b/src/views/market/presale/Index copy 2.vue
index 412d5b1..2dffbcb 100644
--- a/src/views/market/presale/Index copy 2.vue	
+++ b/src/views/market/presale/Index copy 2.vue	
@@ -146,8 +146,15 @@
       <div v-if="orderList.data.length" class="pagination">
         <a-pagination
           :current="page"
-          :pageSize="orderList.per_page"
+          :default-page-size="pageSize"
+          :pageSizes="pageSize"
           :total="orderList.total"
+          :showSizeChanger="true"
+          :showQuickJumper="true"
+          :pageSizeOptions="pageSizeOptions"
+          :layout="'total, sizes, prev, pager, next, jumper'"
+          :showTotal="showTotal"
+          @showSizeChange="handleSizeChange"
           @change="onChangePage"
         />
       </div>
@@ -250,6 +257,9 @@ export default {
       columns,
       // 当前页码
       page: 1,
+      pageSize: 15,
+      pageSizeOptions: ['15', '30', '50'],
+      showTotal: (total) => `共 ${total} 条记录`, // 显示总数
       // 列表数据
       orderList: { data: [], total: 0, per_page: 10 },
       // 自提门店列表
@@ -307,7 +317,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.pageSize })
         .then(response => {
           this.orderList = response.data.list
           console.log('🚀 ~ file: Index.vue:312 ~ getList ~ this.orderList:', this.orderList)
@@ -352,9 +362,15 @@ export default {
       this.searchForm.resetFields()
     },
 
-    // 翻页事件
-    onChangePage (current) {
+   // 翻页事件
+    onChangePage(current, size) {
       this.page = current
+      this.pageSize = size
+      this.handleRefresh()
+    },
+    handleSizeChange(current, size){
+      this.page = current
+      this.pageSize = size
       this.handleRefresh()
     },
 
diff --git a/src/views/market/presale/modules/Log.vue b/src/views/market/presale/modules/Log.vue
index 149409b..3547522 100644
--- a/src/views/market/presale/modules/Log.vue
+++ b/src/views/market/presale/modules/Log.vue
@@ -12,10 +12,10 @@
       <div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-bordered">
         <div class="ant-table-content">
           <div class="ant-table-scroll">
-            <div class="ant-table-body" style="overflow-x: scroll;">
-              <table style="width: 1450px;">
+            <div class="ant-table-body" style="overflow-x: scroll">
+              <table style="width: 1450px">
                 <tbody class="ant-table-tbody">
-                  <template v-for="(item) in orderList.data">
+                  <template v-for="item in orderList.data">
                     <tr class="order-empty" :key="`order_${item.id}_1`">
                       <td colspan="8"></td>
                     </tr>
@@ -25,10 +25,7 @@
                         <span class="mr-20">创建时间：{{ item.ctime }}</span>
                       </td>
                     </tr>
-                    <tr
-                      v-for="(goodsItm, goodsIdx) of item.goods"
-                      :key="`orderGoods_${item.id}_${goodsIdx}`"
-                    >
+                    <tr v-for="(goodsItm, goodsIdx) of item.goods" :key="`orderGoods_${item.id}_${goodsIdx}`">
                       <td>
                         <p>￥{{ goodsItm.goods_name }}</p>
                       </td>
@@ -46,12 +43,18 @@
       <div v-if="orderList.data.length" class="pagination">
         <a-pagination
           :current="page"
-          :pageSize="orderList.per_page"
+          :default-page-size="pageSize"
+          :pageSizes="pageSize"
           :total="orderList.total"
+          :showSizeChanger="true"
+          :showQuickJumper="true"
+          :pageSizeOptions="pageSizeOptions"
+          :layout="'total, sizes, prev, pager, next, jumper'"
+          :showTotal="showTotal"
+          @showSizeChange="handleSizeChange"
           @change="onChangePage"
         />
       </div>
-
     </div>
   </a-modal>
 </template>
@@ -64,9 +67,9 @@ import { Empty } from 'ant-design-vue'
 
 export default {
   components: {
-    STable
+    STable,
   },
-  data () {
+  data() {
     return {
       // 对话框标题
       title: '预售记录',
@@ -85,13 +88,15 @@ export default {
 
       // 当前页码
       page: 1,
-      orderList: { data: [], total: 0, per_page: 10 },
-      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
-
+      pageSize: 15,
+      pageSizeOptions: ['15', '30', '50'],
+      showTotal: (total) => `共 ${total} 条记录`, // 显示总数
+      orderList: { data: [], total: 0},
+      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
     }
   },
   methods: {
-    visibleLog (preId) {
+    visibleLog(preId) {
       // 显示窗口
       this.visible = true
       // 当前记录ID
@@ -103,18 +108,18 @@ export default {
     },
 
     // 获取列表数据
-    getList () {
+    getList() {
       const { queryParam, page } = this
       this.isLoading = true
-      return Api.log({ ...queryParam, page })
-        .then(response => {
+      return Api.log({ ...queryParam, page,pageSize:this.pageSize })
+        .then((response) => {
           this.orderList = response.data.list
         })
-        .finally(() => this.isLoading = false)
+        .finally(() => (this.isLoading = false))
     },
 
     // 关闭对话框事件
-    handleCancel () {
+    handleCancel() {
       this.visible = false
     },
 
@@ -122,17 +127,22 @@ export default {
      * 刷新列表
      * @param Boolean bool 强制刷新到第一页
      */
-    handleRefresh (bool = false) {
+    handleRefresh(bool = false) {
       bool && (this.page = 1)
       this.getList()
     },
-
     // 翻页事件
-    onChangePage (current) {
+    onChangePage(current, size) {
       this.page = current
+      this.pageSize = size
       this.handleRefresh()
-    }
-  }
+    },
+    handleSizeChange(current, size) {
+      this.page = current
+      this.pageSize = size
+      this.handleRefresh()
+    },
+  },
 }
 </script>
 
diff --git a/src/views/order/refund/Index.vue b/src/views/order/refund/Index.vue
index f582c86..1b0a673 100644
--- a/src/views/order/refund/Index.vue
+++ b/src/views/order/refund/Index.vue
@@ -8,37 +8,27 @@
           <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
             <a-form-item label="关键词查询">
               <a-input style="width: 342px" placeholder="请输入关键词" v-decorator="['searchValue']">
-                <a-select
-                  slot="addonBefore"
-                  v-decorator="['searchType', { initialValue: 10 }]"
-                  style="width: 100px"
-                >
-                  <a-select-option
-                    v-for="(item, index) in SearchTypeEnum"
-                    :key="index"
-                    :value="item.value"
-                  >{{ item.name }}</a-select-option>
+                <a-select slot="addonBefore" v-decorator="['searchType', { initialValue: 10 }]" style="width: 100px">
+                  <a-select-option v-for="(item, index) in SearchTypeEnum" :key="index" :value="item.value">{{
+                    item.name
+                  }}</a-select-option>
                 </a-select>
               </a-input>
             </a-form-item>
             <a-form-item label="售后类型">
               <a-select v-decorator="['refundType', { initialValue: -1 }]">
                 <a-select-option :value="-1">全部</a-select-option>
-                <a-select-option
-                  v-for="(item, index) in RefundTypeEnum.data"
-                  :key="index"
-                  :value="item.value"
-                >{{ item.name }}</a-select-option>
+                <a-select-option v-for="(item, index) in RefundTypeEnum.data" :key="index" :value="item.value">{{
+                  item.name
+                }}</a-select-option>
               </a-select>
             </a-form-item>
             <a-form-item label="售后单状态">
               <a-select v-decorator="['refundStatus', { initialValue: -1 }]">
                 <a-select-option :value="-1">全部</a-select-option>
-                <a-select-option
-                  v-for="(item, index) in RefundStatusEnum.data"
-                  :key="index"
-                  :value="item.value"
-                >{{ item.name }}</a-select-option>
+                <a-select-option v-for="(item, index) in RefundStatusEnum.data" :key="index" :value="item.value">{{
+                  item.name
+                }}</a-select-option>
               </a-select>
             </a-form-item>
             <a-form-item label="申请时间">
@@ -87,7 +77,7 @@
                           image: item.orderGoods.goods_image,
                           imageAlt: '商品图片',
                           title: item.orderGoods.goods_name,
-                          goodsProps: item.orderGoods.goods_props
+                          goodsProps: item.orderGoods.goods_props,
                         }"
                       />
                     </td>
@@ -107,49 +97,52 @@
                     <td>
                       <p class="mtb-2">
                         <span class="f-13">商家审核：</span>
-                        <a-tag
-                          :color="renderAuditStatusColor(item.audit_status)"
-                        >{{ AuditStatusEnum[item.audit_status].name }}</a-tag>
+                        <a-tag :color="renderAuditStatusColor(item.audit_status)">{{
+                          AuditStatusEnum[item.audit_status].name
+                        }}</a-tag>
                       </p>
                       <p v-if="item.type == RefundTypeEnum.RETURN.value" class="mtb-2">
                         <span class="f-13">用户发货：</span>
-                        <a-tag
-                          :color="item.is_user_send ? 'green' : ''"
-                        >{{ item.is_user_send ? '已发货' : '待发货' }}</a-tag>
+                        <a-tag :color="item.is_user_send ? 'green' : ''">{{
+                          item.is_user_send ? '已发货' : '待发货'
+                        }}</a-tag>
                       </p>
                       <p v-if="item.type == RefundTypeEnum.RETURN.value" class="mtb-2">
                         <span class="f-13">商家收货：</span>
-                        <a-tag
-                          :color="item.is_receipt ? 'green' : ''"
-                        >{{ item.is_receipt ? '已收货' : '待收货' }}</a-tag>
+                        <a-tag :color="item.is_receipt ? 'green' : ''">{{
+                          item.is_receipt ? '已收货' : '待收货'
+                        }}</a-tag>
                       </p>
                     </td>
                     <td>
-                      <a-tag
-                        :color="renderRefundStatusColor(item.status)"
-                      >{{ RefundStatusEnum[item.status].name }}</a-tag>
+                      <a-tag :color="renderRefundStatusColor(item.status)">{{
+                        RefundStatusEnum[item.status].name
+                      }}</a-tag>
                     </td>
                     <td>
                       <div class="actions">
                         <router-link
                           v-if="$auth('/order/refund/detail')"
                           :to="{ path: '/order/refund/detail', query: { orderRefundId: item.order_refund_id } }"
-                        >详情</router-link>
+                          >详情</router-link
+                        >
                         <a
                           v-action:audit
                           v-if="item.audit_status == AuditStatusEnum.WAIT.value"
                           @click="handleAudit(item)"
-                        >审核</a>
+                          >审核</a
+                        >
                         <a
                           v-action:receipt
-                          v-if="(
-                            item.type == RefundTypeEnum.RETURN.value
-                              && item.audit_status == AuditStatusEnum.REVIEWED.value
-                              && item.is_user_send
-                              && !item.is_receipt
-                          )"
+                          v-if="
+                            item.type == RefundTypeEnum.RETURN.value &&
+                            item.audit_status == AuditStatusEnum.REVIEWED.value &&
+                            item.is_user_send &&
+                            !item.is_receipt
+                          "
                           @click="handleReceipt(item)"
-                        >确认收货</a>
+                          >确认收货</a
+                        >
                       </div>
                     </td>
                   </tr>
@@ -165,8 +158,15 @@
       <div v-if="refundList.data.length" class="pagination">
         <a-pagination
           :current="page"
-          :pageSize="refundList.per_page"
+          :default-page-size="pageSize"
+          :pageSizes="pageSize"
           :total="refundList.total"
+          :showSizeChanger="true"
+          :showQuickJumper="true"
+          :pageSizeOptions="pageSizeOptions"
+          :layout="'total, sizes, prev, pager, next, jumper'"
+          :showTotal="showTotal"
+          @showSizeChange="handleSizeChange"
           @change="onChangePage"
         />
       </div>
@@ -188,52 +188,52 @@ import { AuditForm, ReceiptForm } from './modules'
 const columns = [
   {
     title: '商品信息',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '单价/数量',
     align: 'center',
-    scopedSlots: { customRender: 'unit_price' }
+    scopedSlots: { customRender: 'unit_price' },
   },
   {
     title: '付款金额',
     align: 'center',
     dataIndex: 'total_pay_price',
-    scopedSlots: { customRender: 'pay_price' }
+    scopedSlots: { customRender: 'pay_price' },
   },
   {
     title: '买家',
     dataIndex: 'user',
-    scopedSlots: { customRender: 'user' }
+    scopedSlots: { customRender: 'user' },
   },
   {
     title: '售后类型',
     dataIndex: 'type',
-    scopedSlots: { customRender: 'type' }
+    scopedSlots: { customRender: 'type' },
   },
   {
     title: '处理进度',
     dataIndex: 'progress',
-    scopedSlots: { customRender: 'progress' }
+    scopedSlots: { customRender: 'progress' },
   },
   {
     title: '售后单状态',
     dataIndex: 'status',
-    scopedSlots: { customRender: 'status' }
+    scopedSlots: { customRender: 'status' },
   },
   {
     title: '操作',
     dataIndex: 'action',
     width: '180px',
-    scopedSlots: { customRender: 'action' }
-  }
+    scopedSlots: { customRender: 'action' },
+  },
 ]
 
 // 搜索关键词类型枚举
 const SearchTypeEnum = [
   { name: '订单号', value: 10 },
   { name: '会员昵称', value: 20 },
-  { name: '会员ID', value: 30 }
+  { name: '会员ID', value: 30 },
 ]
 
 export default {
@@ -242,9 +242,9 @@ export default {
     GoodsItem,
     UserItem,
     AuditForm,
-    ReceiptForm
+    ReceiptForm,
   },
-  data () {
+  data() {
     return {
       // 当前表单元素
       searchForm: this.$form.createForm(this),
@@ -256,11 +256,15 @@ export default {
       columns,
       // 当前页码
       page: 1,
+      pageSize: 15,
+      // 列表数据
+      pageSizeOptions: ['15', '30', '50'],
+      showTotal: (total) => `共 ${total} 条记录`, // 显示总数
       // 列表数据
-      refundList: { data: [], total: 0, per_page: 10 }
+      refundList: { data: [], total: 0 },
     }
   },
-  beforeCreate () {
+  beforeCreate() {
     // 批量给当前实例赋值
     assignment(this, {
       inArray,
@@ -268,52 +272,51 @@ export default {
       RefundStatusEnum,
       RefundTypeEnum,
       SearchTypeEnum,
-      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
+      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
     })
   },
-  created () {
+  created() {
     // 初始化页面
     this.init()
   },
   methods: {
-
     // 初始化页面
-    init () {
+    init() {
       this.searchForm.resetFields()
       this.queryParam = {}
       this.handleRefresh(true)
     },
 
     // 获取列表数据
-    getList () {
+    getList() {
       const { queryParam, page } = this
       this.isLoading = true
-      return Api.list({ ...queryParam, page })
-        .then(response => {
+      return Api.list({ ...queryParam, page,pageSize:this.pageSize })
+        .then((response) => {
           this.refundList = response.data.list
         })
-        .finally(() => this.isLoading = false)
+        .finally(() => (this.isLoading = false))
     },
 
     // 渲染商家审核状态标签颜色
-    renderAuditStatusColor (status) {
+    renderAuditStatusColor(status) {
       const { AuditStatusEnum } = this
       const ColorEnum = {
         [AuditStatusEnum.WAIT.value]: '',
         [AuditStatusEnum.REVIEWED.value]: 'green',
-        [AuditStatusEnum.REJECTED.value]: 'red'
+        [AuditStatusEnum.REJECTED.value]: 'red',
       }
       return ColorEnum[status]
     },
 
     // 渲染售后单状态标签颜色
-    renderRefundStatusColor (status) {
+    renderRefundStatusColor(status) {
       const { RefundStatusEnum } = this
       const ColorEnum = {
         [RefundStatusEnum.NORMAL.value]: '',
         [RefundStatusEnum.REJECTED.value]: 'red',
         [RefundStatusEnum.COMPLETED.value]: 'green',
-        [RefundStatusEnum.CANCELLED.value]: 'red'
+        [RefundStatusEnum.CANCELLED.value]: 'red',
       }
       return ColorEnum[status]
     },
@@ -322,13 +325,13 @@ export default {
      * 刷新列表
      * @param Boolean bool 强制刷新到第一页
      */
-    handleRefresh (bool = false) {
+    handleRefresh(bool = false) {
       bool && (this.page = 1)
       this.getList()
     },
 
     // 确认搜索
-    handleSearch (e) {
+    handleSearch(e) {
       e.preventDefault()
       this.searchForm.validateFields((error, values) => {
         if (!error) {
@@ -339,27 +342,31 @@ export default {
     },
 
     // 重置搜索表单
-    handleReset () {
+    handleReset() {
       this.searchForm.resetFields()
     },
 
     // 翻页事件
-    onChangePage (current) {
+    onChangePage(current, size) {
       this.page = current
+      this.pageSize = size
+      this.handleRefresh()
+    },
+    handleSizeChange(current, size){
+      this.page = current
+      this.pageSize = size
       this.handleRefresh()
     },
-
     // 商家审核
-    handleAudit (record) {
+    handleAudit(record) {
       this.$refs.AuditForm.show(record)
     },
 
     // 确认收货
-    handleReceipt (record) {
+    handleReceipt(record) {
       this.$refs.ReceiptForm.show(record)
-    }
-
-  }
+    },
+  },
 }
 </script>
 <style lang="less" scoped>
diff --git a/src/views/order/tools/delivery/Index.vue b/src/views/order/tools/delivery/Index.vue
index 8bed2eb..c4acffb 100644
--- a/src/views/order/tools/delivery/Index.vue
+++ b/src/views/order/tools/delivery/Index.vue
@@ -177,8 +177,15 @@
       <div v-if="orderList.data.length" class="pagination">
         <a-pagination
           :current="page"
-          :pageSize="orderList.per_page"
+          :default-page-size="pageSize"
+          :pageSizes="pageSize"
           :total="orderList.total"
+          :showSizeChanger="true"
+          :showQuickJumper="true"
+          :pageSizeOptions="pageSizeOptions"
+          :layout="'total, sizes, prev, pager, next, jumper'"
+          :showTotal="showTotal"
+          @showSizeChange="handleSizeChange"
           @change="onChangePage"
         />
       </div>
@@ -283,8 +290,11 @@ export default {
       columns,
       // 当前页码
       page: 1,
+      pageSize: 15,
+      pageSizeOptions: ['15', '30', '50'],
+      showTotal: (total) => `共 ${total} 条记录`, // 显示总数
       // 列表数据
-      orderList: { data: [], total: 0, per_page: 10 },
+      orderList: { data: [], total: 0},
     }
   },
   beforeCreate () {
@@ -319,7 +329,7 @@ export default {
     getList () {
       const { dataType, queryParam, page } = this
       this.isLoading = true
-      return Api.list({ dataType, ...queryParam, deliveryType: DeliveryTypeEnum.EXPRESS.value, page })
+      return Api.list({ dataType, ...queryParam, deliveryType: DeliveryTypeEnum.EXPRESS.value, page,pageSize:this.pageSize })
         .then(response => {
           this.orderList = response.data.list
         })
@@ -352,11 +362,16 @@ export default {
     },
 
     // 翻页事件
-    onChangePage (current) {
+    onChangePage(current, size) {
       this.page = current
+      this.pageSize = size
+      this.handleRefresh()
+    },
+    handleSizeChange(current, size) {
+      this.page = current
+      this.pageSize = size
       this.handleRefresh()
     },
-
     // 订单发货
     handleDelivery (item) {
       this.$refs.DeliveryForm.show(item)
diff --git a/src/views/order/tools/delivery/Record.vue b/src/views/order/tools/delivery/Record.vue
index c080a29..6c005bc 100644
--- a/src/views/order/tools/delivery/Record.vue
+++ b/src/views/order/tools/delivery/Record.vue
@@ -133,8 +133,15 @@
       <div v-if="orderList.data.length" class="pagination">
         <a-pagination
           :current="page"
-          :pageSize="orderList.per_page"
+          :default-page-size="pageSize"
+          :pageSizes="pageSize"
           :total="orderList.total"
+          :showSizeChanger="true"
+          :showQuickJumper="true"
+          :pageSizeOptions="pageSizeOptions"
+          :layout="'total, sizes, prev, pager, next, jumper'"
+          :showTotal="showTotal"
+          @showSizeChange="handleSizeChange"
           @change="onChangePage"
         />
       </div>
@@ -218,8 +225,11 @@ export default {
       columns,
       // 当前页码
       page: 1,
+      pageSize: 15,
+      pageSizeOptions: ['15', '30', '50'],
+      showTotal: (total) => `共 ${total} 条记录`, // 显示总数
       // 列表数据
-      orderList: { data: [], total: 0, per_page: 10 },
+      orderList: { data: [], total: 0, },
     }
   },
   beforeCreate () {
@@ -247,7 +257,7 @@ export default {
     getList () {
       const { queryParam, page } = this
       this.isLoading = true
-      return Api.list({ ...queryParam, page })
+      return Api.list({ ...queryParam, page,pageSize:this.pageSize })
         .then(response => {
           this.orderList = response.data.list
         })
@@ -278,13 +288,17 @@ export default {
     handleReset () {
       this.searchForm.resetFields()
     },
-
     // 翻页事件
-    onChangePage (current) {
+    onChangePage(current, size) {
       this.page = current
+      this.pageSize = size
+      this.handleRefresh()
+    },
+    handleSizeChange(current, size) {
+      this.page = current
+      this.pageSize = size
       this.handleRefresh()
     },
-
     // 显示电子面单
     handleEorder (item) {
       this.$refs.EorderShow.handle(item)
diff --git a/src/views/server/Order.vue b/src/views/server/Order.vue
index 7f5599a..43cca55 100644
--- a/src/views/server/Order.vue
+++ b/src/views/server/Order.vue
@@ -69,10 +69,16 @@
     </a-table>
     <a-pagination
       v-model="queryParam.page"
+      :default-page-size="queryParam.pageSize"
+      :pageSizes="queryParam.pageSize"
       :total="total"
-      show-less-items
+      :showSizeChanger="true"
+      :showQuickJumper="true"
+      :pageSizeOptions="pageSizeOptions"
+      :layout="'total, sizes, prev, pager, next, jumper'"
+      :showTotal="showTotal"
+      @showSizeChange="handleSizeChange"
       @change="handlePageChange"
-      :page-size="queryParam.pageSize"
       style="float: right"
     />
     <dispatch ref="dispatchRef" @handleSubmit="handleRefresh" />
@@ -162,6 +168,8 @@ export default {
         page: 1,
         pageSize: 15,
       },
+      pageSizeOptions: ['15', '30', '50'],
+      showTotal: (total) => `共 ${total} 条记录`, // 显示总数
       total: 0,
       // 正在加载
       isLoading: false,
@@ -221,8 +229,14 @@ export default {
     handleReset() {
       this.searchForm.resetFields()
     },
-    handlePageChange(val) {
-      this.queryParam.page = val
+    handlePageChange(current, size) {
+      this.queryParam.page = current
+      this.queryParam.pageSize = size
+      this.fetchData()
+    },
+    handleSizeChange(current, size) {
+      this.queryParam.page = current
+      this.queryParam.pageSize = size
       this.fetchData()
     },
     // 取消订单