修复表格分页pageSize无效的bug

src/components/Table/PropTable/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="zb-pro-table">
     <div class="header">
-      <el-form :inline="true"
-               class="search-form"
-               :model="formInline"  ref="ruleFormRef" >
+      <el-form :inline="true" class="search-form" :model="formInline" ref="ruleFormRef">
         <template v-for="(item, index) in formSearchData" :key="index">
           <el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
             <template v-if="item.valueType === 'input'">
@@ -12,7 +10,9 @@
             <template v-if="item.valueType === 'select'">
               <el-select
                 style="width: 100%"
-                  v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
+                v-model="formInline[item.name]"
+                :placeholder="`请选择${item.label}`"
+              >
                 <el-option
                   v-for="ite in item.options"
                   :key="ite.value"
@@ -27,7 +27,9 @@
       <div class="search">
         <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
         <el-button @click="reset(ruleFormRef)">重置</el-button>
-        <el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
+        <el-button link type="primary" @click="isExpand = !isExpand"
+          >{{ isExpand ? '合并' : '展开'
+          }}<el-icon>
             <arrow-down v-if="!isExpand" />
             <arrow-up v-else /> </el-icon
         ></el-button>
@@ -77,7 +79,7 @@
       <div class="pagination">
         <el-pagination
           v-model:currentPage="currentPage1"
-            :page-size="10"
+          :page-sizes="[10, 20, 30, 40, 50, 100]"
           background
           layout="total, sizes, prev, pager, next, jumper"
           :total="data.length"
@@ -97,11 +99,11 @@ const ruleFormRef = ref<FormInstance>()
   const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
   let props = defineProps({
     columns: {
-    type: Array,
+      type: Array<any>,
       default: () => [],
     },
     data: {
-    type: Array,
+      type: Array<any>,
       default: () => [],
     },
     loading: {
@@ -113,8 +115,11 @@ let props = defineProps({
   const currentPage1 = ref(1)
   // 收缩展开
   const isExpand = ref(false)
+  // 每页显示几个数据
+  const pageSize = ref(10)
   const handleSizeChange = (val: number) => {
     console.log(`${val} items per page`)
+    pageSize.value = val
   }
   const handleCurrentChange = (val: number) => {
     console.log(`current page: ${val}`)
@@ -123,7 +128,7 @@ const handleCurrentChange = (val: number) => {
 
   const list = computed(() => {
     let arr = JSON.parse(JSON.stringify(props.data))
-  return arr.splice((currentPage1.value - 1) * 10, 10)
+    return arr.splice((currentPage1.value - 1) * pageSize.value, pageSize.value)
   })
 
   const listLoading = ref(false)
@@ -220,7 +225,7 @@ const deleteAction = (row) => {
       box-shadow: 0 0 12px rgb(0 0 0 / 5%);
       min-height: 300px;
       .operator {
-      margin-bottom: 15px
+        margin-bottom: 15px;
       }
       .table {
         position: relative;