表格分页处理

src/components/common-table/index.vue

@@ -60,14 +60,17 @@ const props = defineProps({
     type: Object,
     default: null
   },
-  pageInfo: {
+  page: {
     type: Object,
     default: null
   },
   pageAttrs: {
     type: Object,
     default () {
-      return {}
+      return {
+        layout: 'total, sizes, prev, pager, next',
+        pageSizes: [10, 20, 50]
+      }
     }
   }
 })
@@ -89,6 +92,9 @@ const calcColumns = computed(() => {
   }
   return _columns
 })
+
+defineEmits(['pageSizeChange', 'currentPageChange'])
+
 </script>
 
 <template>
@@ -118,10 +124,21 @@ const calcColumns = computed(() => {
         />
       </template>
     </common-table-column>
-    <el-pagination v-if="pageInfo" />
   </el-table>
+  <el-pagination
+    v-if="page && page.totalCount"
+    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)"
+  />
 </template>
 
 <style scoped>
-
+.common-pagination {
+  margin-top: 15px;
+}
 </style>

src/config.js

@@ -3,13 +3,16 @@
  * @type {number}
  */
 export const PAGE_SIZE = 10
+
 /**
- * 分页数量选项
- * @type {number[]}
+ * 默认分页数据
+ *
+ * @param pageSize
+ * @return {{pageIndex: number, pageSize: number, totalCount: number, pageNumber:number}}
  */
-export const PAGE_SIZE_LIST = [10, 20, 50]
-/**
- * 默认分页跳转
- * @type {string}
- */
-export const PAGE_LAYOUT = 'total, prev, pager, next'
+export const useDefaultPage = (pageSize = PAGE_SIZE) => {
+  return {
+    pageSize,
+    pageIndex: 1
+  }
+}

src/services/user/UserService.js

@@ -0,0 +1,20 @@
+/**
+ * @typedef {Object} UserDto
+ * @property {number} id
+ * @property {string} nameCn
+ * @property {string} nameEn
+ * @property {string} address
+ * @property {string} gender
+ * @property {Date} birthday
+ */
+import { $httpPost } from '@/vendors/axios'
+
+/**
+ * 加载用户数据
+ * @return {{success:boolean, message:string,userList: [UserDto]}}
+ */
+export const loadUsersResult = async config => {
+  const usersResult = await $httpPost('/api/users', config)
+  console.info('==================', usersResult)
+  return usersResult
+}

src/stores/LoginConfigStore.js

@@ -48,4 +48,6 @@ export const useLoginConfigStore = defineStore('loginConfig', () => {
       return loginResult
     }
   }
+}, {
+  persist: true
 })

src/views/tools/Tables.vue

@@ -1,42 +1,33 @@
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { loadUsersResult } from '@/services/user/UserService'
+import { useDefaultPage } from '@/config'
 
-const tableData = [
-  {
-    id: '1',
-    birthday: '2016-05-03',
-    userName: 'Tom',
-    gender: 'male',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '2',
-    birthday: '2016-05-02',
-    userName: 'Tom',
-    gender: 'female',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    id: '3',
-    birthday: '2016-05-04',
-    userName: 'Tom',
-    gender: 'male',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    birthday: '2016-05-01',
-    userName: 'Tom',
-    gender: 'female',
-    address: 'No. 189, Grove St, Los Angeles'
+const page = ref(useDefaultPage())
+
+const tableData = ref([])
+
+onMounted(async () => {
+  const usersResult = await loadUsersResult()
+  console.info('=================', usersResult)
+  if (usersResult.success && usersResult.resultData) {
+    const resultData = usersResult.resultData
+    tableData.value = resultData.userList
+    Object.assign(page.value, resultData.page)
   }
-]
+})
+
 /**
  *
  * @type {[CommonTableColumn]}
  */
 const columns = [{
-  label: '用户名',
-  property: 'userName',
+  label: '中文名',
+  property: 'nameCn',
+  link: '#/tables/edit'
+}, {
+  label: '英文名',
+  property: 'nameEn',
   link: '#/tables/edit'
 }, {
   label: '性别',
@@ -81,7 +72,10 @@ const buttons = ref([{
     :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