表格分页处理

src/assets/main.css

@@ -81,6 +81,10 @@ html, body, #app, .index-container {
     text-align: center;
 }
 
+.no_flex {
+    display: block;
+}
+
 /**
  * slide-fade动画
  */

src/components/common-table/index.vue

@@ -64,6 +64,10 @@ const props = defineProps({
     type: Object,
     default: null
   },
+  pageAlign: {
+    type: String,
+    default: 'center'
+  },
   pageAttrs: {
     type: Object,
     default () {
@@ -93,7 +97,16 @@ const calcColumns = computed(() => {
   return _columns
 })
 
-defineEmits(['pageSizeChange', 'currentPageChange'])
+const emit = defineEmits(['pageSizeChange', 'currentPageChange', 'update:page'])
+
+const pageSizeChange = (pageSize) => {
+  emit('update:page', { ...props.page, pageSize })
+  emit('pageSizeChange', pageSize)
+}
+const currentPageChange = (pageNumber) => {
+  emit('update:page', { ...props.page, pageNumber })
+  emit('currentPageChange', pageNumber)
+}
 
 </script>
 
@@ -126,19 +139,20 @@ defineEmits(['pageSizeChange', 'currentPageChange'])
     </common-table-column>
   </el-table>
   <el-pagination
-    v-if="page && page.totalCount"
+    v-if="page &&page.pageCount&&page.pageCount>1"
     class="common-pagination"
     v-bind="pageAttrs"
     :total="page.totalCount"
     :page-size="page.pageSize"
-    :current-page="page.pageIndex"
-    @size-change="$emit('pageSizeChange', $event)"
-    @current-change="$emit('currentPageChange', $event)"
+    :current-page="page.pageNumber"
+    @size-change="pageSizeChange($event)"
+    @current-change="currentPageChange($event)"
   />
 </template>
 
 <style scoped>
 .common-pagination {
   margin-top: 15px;
+  justify-content: v-bind(pageAlign);
 }
 </style>

src/config.js

@@ -8,11 +8,11 @@ export const PAGE_SIZE = 10
  * 默认分页数据
  *
  * @param pageSize
- * @return {{pageIndex: number, pageSize: number, totalCount: number, pageNumber:number}}
+ * @return {{pageCount: number, pageSize: number, totalCount: number, pageNumber:number}}
  */
 export const useDefaultPage = (pageSize = PAGE_SIZE) => {
   return {
     pageSize,
-    pageIndex: 1
+    pageNumber: 1
   }
 }

src/services/user/UserService.js

@@ -13,8 +13,8 @@ import { $httpPost } from '@/vendors/axios'
  * 加载用户数据
  * @return {{success:boolean, message:string,userList: [UserDto]}}
  */
-export const loadUsersResult = async config => {
-  const usersResult = await $httpPost('/api/users', config)
+export const loadUsersResult = async (data, config) => {
+  const usersResult = await $httpPost('/api/users', data, config)
   console.info('==================', usersResult)
   return usersResult
 }

src/views/tools/Tables.vue

@@ -7,14 +7,17 @@ const page = ref(useDefaultPage())
 
 const tableData = ref([])
 
-onMounted(async () => {
-  const usersResult = await loadUsersResult()
-  console.info('=================', usersResult)
+const loadUsers = async () => {
+  const usersResult = await loadUsersResult({ page: page.value })
   if (usersResult.success && usersResult.resultData) {
     const resultData = usersResult.resultData
     tableData.value = resultData.userList
     Object.assign(page.value, resultData.page)
   }
+}
+
+onMounted(() => {
+  loadUsers()
 })
 
 /**
@@ -67,32 +70,34 @@ const buttons = ref([{
 </script>
 
 <template>
-  <common-table
-    :data="tableData"
-    :columns="columns"
-    :buttons="buttons"
-    buttons-slot="buttons"
-    :page="page"
-    :buttons-column-attrs="{width:'300px'}"
-    @page-size-change="console.info"
-    @current-page-change="console.info"
-  >
-    <template #gender="{item}">
-      <el-tag
-        :type="item.gender === 'male' ? '' : 'success'"
-      >
-        {{ item.gender }}
-      </el-tag>
-    </template>
-    <template #buttons="{item}">
-      <el-button
-        size="small"
-        @click="console.info(item)"
-      >
-        测试
-      </el-button>
-    </template>
-  </common-table>
+  <el-container class="no_flex">
+    <common-table
+      v-model:page="page"
+      :data="tableData"
+      :columns="columns"
+      :buttons="buttons"
+      buttons-slot="buttons"
+      :buttons-column-attrs="{width:'300px'}"
+      @page-size-change="loadUsers()"
+      @current-page-change="loadUsers()"
+    >
+      <template #gender="{item}">
+        <el-tag
+          :type="item.gender === 'male' ? '' : 'success'"
+        >
+          {{ item.gender }}
+        </el-tag>
+      </template>
+      <template #buttons="{item}">
+        <el-button
+          size="small"
+          @click="console.info(item)"
+        >
+          测试
+        </el-button>
+      </template>
+    </common-table>
+  </el-container>
 </template>
 
 <style scoped>