分页查询功能实现

src/components/ManageMail.vue

@@ -53,16 +53,16 @@
             </template>
         </el-table-column>
     </el-table>
-    <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="currentPage"
-        :page-sizes="[10, 20, 30, 40, 50]" :page-size="10" layout="total,sizes, prev, pager, next, jumper"
-        :total="totalSize">
+    <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
+        :current-page="pageData.currentPage" :page-sizes="[2, 4, 6, 8, 10]" :page-size="pageData.pageSize"
+        layout="total,sizes, prev, pager, next, jumper" :total="pageData.totalSize">
     </el-pagination>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import axios from 'axios'
-import { onMounted } from 'vue';
+import { onMounted, onUpdated } from 'vue';
 import router from '../router';
 
 const form = ref({
@@ -78,20 +78,28 @@ const form = ref({
 // 定义可变的tableData变量，并用axios请求数据
 const tableData = ref([])
 
+const pageData = ref({
+    currentPage: 1,
+    pageSize: 2,
+    totalSize: 0
+})
+
 
 onMounted(() => {
-    axios.get('api/mailbox/list')
+    const data = JSON.stringify(pageData.value)
+    console.log(data)
+    axios.post('api/mailbox/list', data, { headers: { 'Content-Type': 'application/json' } })
         .then(function (response) {
             console.log(response);
-            tableData.value = response.data;
-            totalSize.value = response.data.length;
+            tableData.value = response.data.mails;
+            pageData.value.totalSize = response.data.pageSet.totalSize;
         })
         .catch(function (error) { console.log(error) })
 })
 
-const currentPage = ref(1)
-const totalSize = ref(2)
-
+onUpdated(() => {
+    console.log('updated')
+})
 
 const flexColumnWidth = (label, prop) => {
     const width = Math.max(label.length * 12, 120)
@@ -105,19 +113,48 @@ const handleDetail = (index) => {
 }
 
 const handleSizeChange = (size) => {
-    console.log(size)
+    const requestData = {
+        formData: form.value,
+        pageData: pageData.value
+    }
+    pageData.value.pageSize = size
+    const data = JSON.stringify(requestData)
+    console.log(data)
+    axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } })
+        .then(function (response) {
+            tableData.value = response.data.mails;
+            pageData.value.totalSize = response.data.pageSet.totalSize;
+        })
+        .catch(function (error) { console.log(error) })
 }
 
 const handlePageChange = (currentPage) => {
-    console.log(currentPage)
+    const requestData = {
+        formData: form.value,
+        pageData: pageData.value
+    }
+    pageData.value.currentPage = currentPage
+    const data = JSON.stringify(requestData)
+    console.log(data)
+    axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } })
+        .then(function (response) {
+            tableData.value = response.data.mails;
+            pageData.value.totalSize = response.data.pageSet.totalSize;
+        })
+        .catch(function (error) { console.log(error) })
 }
 
 const search = () => {
-    const data = JSON.stringify(form.value)
+    const requestData = {
+        formData: form.value,
+        pageData: pageData.value
+    }
+    const data = JSON.stringify(requestData)
     console.log(data)
-    axios.post('api/mailbox/list-submit', data)
+    axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } })
         .then(function (response) {
-            console.log(response);
+            tableData.value = response.data.mails;
+            pageData.value.totalSize = response.data.pageSet.totalSize;
         })
         .catch(function (error) { console.log(error) })
 }