修复表格分页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"
+      <el-form :inline="true" class="search-form" :model="formInline" ref="ruleFormRef">
-               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>
@@ -53,7 +55,7 @@
               v-if="item.type"
               :type="item.type"
               :width="item.width"
-                :align="item.align!=null?item.align:'center'"
+              :align="item.align != null ? item.align : 'center'"
               :fixed="item.fixed"
               :label="item.label"
             />
@@ -61,7 +63,7 @@
               v-else
               :prop="item.name"
               :width="item.width"
-                :align="item.align!=null?item.align:'center'"
+              :align="item.align != null ? item.align : 'center'"
               :fixed="item.fixed"
               :label="item.label"
             >
@@ -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"
@@ -89,78 +91,81 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+  import { computed, ref } from 'vue'
-import {Search } from '@element-plus/icons-vue'
+  import { Search } from '@element-plus/icons-vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+  import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance } from 'element-plus'
+  import type { FormInstance } from 'element-plus'
-const ruleFormRef = ref<FormInstance>()
+  const ruleFormRef = ref<FormInstance>()
-const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
+  const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
-let props = defineProps({
+  let props = defineProps({
     columns: {
-    type: Array,
+      type: Array<any>,
       default: () => [],
     },
     data: {
-    type: Array,
+      type: Array<any>,
       default: () => [],
     },
     loading: {
       type: Boolean,
       default: false,
     },
-})
+  })
 
-const currentPage1 = ref(1)
+  const currentPage1 = ref(1)
-// 收缩展开
+  // 收缩展开
-const isExpand = ref(false)
+  const isExpand = ref(false)
-const handleSizeChange = (val: number) => {
+  // 每页显示几个数据
+  const pageSize = ref(10)
+  const handleSizeChange = (val: number) => {
     console.log(`${val} items per page`)
-}
+    pageSize.value = val
-const handleCurrentChange = (val: number) => {
+  }
+  const handleCurrentChange = (val: number) => {
     console.log(`current page: ${val}`)
     currentPage1.value = val
-}
+  }
 
-const list = computed(() => {
+  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)
+  const listLoading = ref(false)
-const confirmEdit = (row) => {
+  const confirmEdit = (row) => {
     row.edit = false
-}
+  }
-const cancelEdit = (row) => {
+  const cancelEdit = (row) => {
     row.edit = false
-}
+  }
 
-import { reactive } from 'vue'
+  import { reactive } from 'vue'
 
-let obj = {}
+  let obj = {}
-let search = []
+  let search = []
-for (let item of props.columns) {
+  for (let item of props.columns) {
     if (item.inSearch) {
       obj[item.name] = null
     }
     if (item.inSearch) {
       search.push(item)
     }
-}
+  }
-const formSearchData = ref(search)
+  const formSearchData = ref(search)
-const formInline = reactive(obj)
+  const formInline = reactive(obj)
 
-const onSubmit = () => {
+  const onSubmit = () => {
     console.log('submit!', formInline)
     emit('onSubmit', formInline)
-}
+  }
 
-const reset = (formEl: FormInstance | undefined) => {
+  const reset = (formEl: FormInstance | undefined) => {
     formSearchData.value.forEach((item) => {
       formInline[item.name] = null
     })
     emit('reset')
-}
+  }
-const deleteAction = (row) => {
+  const deleteAction = (row) => {
     ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
@@ -172,44 +177,44 @@ const deleteAction = (row) => {
         ElMessage.success('删除成功')
       })
       .catch(() => {})
-}
+  }
 </script>
 <style scoped lang="scss">
-.edit-input {
+  .edit-input {
     padding-right: 100px;
-}
+  }
-.cancel-btn {
+  .cancel-btn {
     position: absolute;
     right: 15px;
     top: 10px;
-}
+  }
-.zb-pro-table {
+  .zb-pro-table {
     width: 100%;
     height: 100%;
-  display:flex;
+    display: flex;
-  flex-direction:column;
+    flex-direction: column;
 
-  .header{
+    .header {
       display: flex;
       padding: 16px 16px 0 16px;
       margin-bottom: 16px;
       border-radius: 4px;
       background: white;
       box-shadow: 0 0 12px rgb(0 0 0 / 5%);
-    .search-form{
+      .search-form {
         flex: 1;
-      ::v-deep{
+        ::v-deep {
-        .el-input--default{
+          .el-input--default {
             width: 200px;
           }
         }
       }
-    .search{
+      .search {
         flex-shrink: 0;
         white-space: nowrap;
       }
     }
-  .footer{
+    .footer {
       flex: 1;
       display: flex;
       padding: 16px;
@@ -219,31 +224,31 @@ const deleteAction = (row) => {
       background: white;
       box-shadow: 0 0 12px rgb(0 0 0 / 5%);
       min-height: 300px;
-    .operator{
+      .operator {
-      margin-bottom: 15px
+        margin-bottom: 15px;
       }
-    .table{
+      .table {
         position: relative;
         flex: 1;
       }
-    .zb-table{
+      .zb-table {
         position: absolute;
         height: 100%;
       }
     }
-  ::v-deep{
+    ::v-deep {
-    .el-table__header th{
+      .el-table__header th {
         font-size: 15px;
         font-weight: 700;
         color: #252525;
       }
     }
-  .pagination{
+    .pagination {
       width: 100%;
       display: flex;
       justify-content: center;
       padding-top: 20px;
       box-sizing: border-box;
     }
-}
+  }
 </style>