Vue3 + TypeScript + Element Plus + el-pagination 分頁查詢實例分享

前端技術棧：Vue3 + TypeScript + Element Plus +?el-pagination

后端技術棧：Java + Spring Boot + Mybatis

應用異常情況說明：點擊頁碼2，會發送兩次請求，并且自動跳回頁碼1

?代碼：?Reagent.vue

<script setup lang="ts" name="Reagent">
import { reagentQueryService } from "@/api/reagent";
import BasePreventReClickButton from "@/components/base/BasePreventReClickButton.vue";
import type { IPageListResponse } from "@/interface";
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import type { IReagent, IReagentQueryObj } from "./reagent/types";// 試劑分頁列表
const reagentPageList = ref<IReagent[]>([]);
// 查詢總數
const total = ref(0);
// 加載標識
const loading = ref(false);
// 查詢對象
const queryObj = ref<IReagentQueryObj>({pageHelper: {page: 1,size: 20},reagentCategory: "",reagentNo: "",reagentName: ""
});
// 分頁頁數及顯示數量變動監聽標識，默認不監聽
const onPageOrSizeChangeValid = ref(false);// 查詢
const onQueryClick = async () => {try {loading.value = true;// 把列表數據清空，點擊查詢時，視覺上感知數據正在變化reagentPageList.value = [];total.value = 0;let result = <IPageListResponse<IReagent>>(await reagentQueryService(queryObj.value)).data;reagentPageList.value = result.rows;total.value = result.total;} catch (error) {} finally {loading.value = false;onPageOrSizeChangeValid.value = true;}
};// 改變頁碼、顯示數量，重新獲取數據
const onPageOrSizeChange = async (currentPage: number, pageSize: number) => {if (!onPageOrSizeChangeValid.value) {return;}queryObj.value.pageHelper.page = currentPage;queryObj.value.pageHelper.size = pageSize;// 獲取數據await onQueryClick();
};
</script><template><el-container class="container"><el-header class="header"><!-- 標題 --><div class="header-title">試劑耗材管理</div><!-- 操作欄 --><div class="header-operation"><div><el-button class="header-btn" type="primary" plain> 入庫 </el-button><el-button class="header-btn" type="primary" plain> 申領 </el-button><el-button class="header-btn" type="primary" plain> 出庫 </el-button><el-button class="header-btn" type="primary" plain> 明細查詢 </el-button><el-button class="header-btn" type="primary" plain> 刷新數據 </el-button></div><div class="query-div"><el-input v-model="queryObj.reagentName" placeholder="請輸入試劑關鍵字進行查詢" clearable><template #prefix><el-icon><Search /></el-icon></template></el-input><BasePreventReClickButton class="query-btn" type="primary" plain :onClick="onQueryClick" :delay="100">查詢</BasePreventReClickButton></div></div></el-header><el-main class="main"><!-- 展示區 --><el-table:data="reagentPageList"v-loading="loading"highlight-current-rowstripestyle="width: 100%; height: 100%"><el-table-columnprop="reagentName"label="名稱 規格"min-width="200"fixed="left"header-align="left"sortableshow-overflow-tooltip><template #default="scope"><span class="material-name">{{ scope.row.reagentName }}</span><span class="material-spec">{{ scope.row.reagentSpec }}</span></template></el-table-column><el-table-column prop="batchNo" label="批號" width="120" header-align="left" show-overflow-tooltip /><el-table-columnprop="validityDate"label="有效期至"width="110"header-align="center"align="center"show-overflow-tooltip /><el-table-column prop="amount" width="80" header-align="center" align="center" show-overflow-tooltip><template #header><div class="custom-table-column-header-amount-unit-div">庫存數量</div></template><template #default="scope"><div class="custom-table-row-default-amount-unit-div"><span>{{ scope.row.amount }}</span><span>{{ scope.row.reagentUnit }}</span></div></template></el-table-column></el-table></el-main><el-footer class="footer"><!-- 分頁 --><el-pagination:total="total":page-sizes="[20, 50, 100, 200, 500]"v-model:page-size="queryObj.pageHelper.size"v-model:current-page="queryObj.pageHelper.page"backgroundlayout="total, sizes, prev, pager, next, jumper":small="false"@change="onPageOrSizeChange" /></el-footer></el-container>
</template><style scoped lang="scss">
// 選擇 container 所有直接子元素（不包括孫級）
.container > * {margin: 0;padding: 0;
}
.container {height: 100%;border: 1px solid #ebeef5;.header {height: auto;.header-title {margin: 10px 10px 20px 10px;font-size: 18px;}.header-operation {margin: 10px;display: flex;justify-content: space-between;.query-div {display: flex;justify-content: flex-end;// 設置固定寬度，避免由于寬度自適應，導致頁面跳動width: 300px;// 因為點擊查詢按鈕時，會顯示加載動畫，撐大了原來的按鈕寬度，導致頁面跳動，所以設置寬度為100px，預留足夠的空間，避免頁面跳動.query-btn {width: 100px;}}}}.footer {height: auto;padding: 0 10px;}
}
.table-btn {margin: 0;padding: 0 5px;
}
.custom-table-column-header-amount-unit-div {text-align: justify;text-align-last: justify;
}
.custom-table-row-default-amount-unit-div {display: flex;justify-content: space-between;
}
</style>

問題分析：

都是?total.value = 0; 引起的

因為分頁組件 total 變化，會觸發分頁組件重新計算頁數（total / page-size），并且重置當前頁數 current-page 為 1，page 變化，又會觸發 onPageOrSizeChange 事件

最終修改后的完整代碼：?Reagent.vue

<script setup lang="ts" name="Reagent">
import { reagentQueryService } from "@/api/reagent";
import BasePreventReClickButton from "@/components/base/BasePreventReClickButton.vue";
import type { IPageListResponse } from "@/interface";
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import type { IReagent, IReagentQueryObj } from "./reagent/types";// 試劑分頁列表
const reagentPageList = ref<IReagent[]>([]);
// 查詢總數
const total = ref(0);
// 加載標識
const loading = ref(false);
// 查詢對象
const queryObj = ref<IReagentQueryObj>({pageHelper: {page: 1,size: 20},reagentCategory: "",reagentNo: "",reagentName: ""
});
// 分頁頁數及顯示數量變動監聽標識，默認不監聽
const onPageOrSizeChangeValid = ref(false);// 查詢
const onQueryClick = async () => {try {loading.value = true;// 把列表數據清空，點擊查詢時，視覺上感知數據正在變化reagentPageList.value = [];// 這個位置（發送查詢請求前），不能 total.value = 0; 改變 total.value 的值// 因為分頁組件 total 變化，會觸發分頁組件重新計算頁數（total / page-size），并且重置當前頁數 current-page 為 1// page 變化，又會觸發 onPageOrSizeChange 事件// total.value = 0;let result = <IPageListResponse<IReagent>>(await reagentQueryService(queryObj.value)).data;reagentPageList.value = result.rows;total.value = result.total;} catch (error) {// 出錯了，在這里設置查詢總數為 0total.value = 0;} finally {loading.value = false;onPageOrSizeChangeValid.value = true;}
};// 改變頁碼、顯示數量，重新獲取數據
const onPageOrSizeChange = async (currentPage: number, pageSize: number) => {if (!onPageOrSizeChangeValid.value) {return;}queryObj.value.pageHelper.page = currentPage;queryObj.value.pageHelper.size = pageSize;// 獲取數據await onQueryClick();
};
</script><template><el-container class="container"><el-header class="header"><!-- 標題 --><div class="header-title">試劑耗材管理</div><!-- 操作欄 --><div class="header-operation"><div><el-button class="header-btn" type="primary" plain> 入庫 </el-button><el-button class="header-btn" type="primary" plain> 申領 </el-button><el-button class="header-btn" type="primary" plain> 出庫 </el-button><el-button class="header-btn" type="primary" plain> 明細查詢 </el-button><el-button class="header-btn" type="primary" plain> 刷新數據 </el-button></div><div class="query-div"><el-input v-model="queryObj.reagentName" placeholder="請輸入試劑關鍵字進行查詢" clearable><template #prefix><el-icon><Search /></el-icon></template></el-input><BasePreventReClickButton class="query-btn" type="primary" plain :onClick="onQueryClick" :delay="100">查詢</BasePreventReClickButton></div></div></el-header><el-main class="main"><!-- 展示區 --><el-table:data="reagentPageList"v-loading="loading"highlight-current-rowstripestyle="width: 100%; height: 100%"><el-table-columnprop="reagentName"label="名稱 規格"min-width="200"fixed="left"header-align="left"sortableshow-overflow-tooltip><template #default="scope"><span class="material-name">{{ scope.row.reagentName }}</span><span class="material-spec">{{ scope.row.reagentSpec }}</span></template></el-table-column><el-table-column prop="batchNo" label="批號" width="120" header-align="left" show-overflow-tooltip /><el-table-columnprop="validityDate"label="有效期至"width="110"header-align="center"align="center"show-overflow-tooltip /><el-table-column prop="amount" width="80" header-align="center" align="center" show-overflow-tooltip><template #header><div class="custom-table-column-header-amount-unit-div">庫存數量</div></template><template #default="scope"><div class="custom-table-row-default-amount-unit-div"><span>{{ scope.row.amount }}</span><span>{{ scope.row.reagentUnit }}</span></div></template></el-table-column></el-table></el-main><el-footer class="footer"><!-- 分頁 --><el-pagination:total="total":page-sizes="[20, 50, 100, 200, 500]"v-model:page-size="queryObj.pageHelper.size"v-model:current-page="queryObj.pageHelper.page"backgroundlayout="total, sizes, prev, pager, next, jumper":small="false"@change="onPageOrSizeChange" /></el-footer></el-container>
</template><style scoped lang="scss">
// 選擇 container 所有直接子元素（不包括孫級）
.container > * {margin: 0;padding: 0;
}
.container {height: 100%;border: 1px solid #ebeef5;.header {height: auto;.header-title {margin: 10px 10px 20px 10px;font-size: 18px;}.header-operation {margin: 10px;display: flex;justify-content: space-between;.query-div {display: flex;justify-content: flex-end;// 設置固定寬度，避免由于寬度自適應，導致頁面跳動width: 300px;// 因為點擊查詢按鈕時，會顯示加載動畫，撐大了原來的按鈕寬度，導致頁面跳動，所以設置寬度為100px，預留足夠的空間，避免頁面跳動.query-btn {width: 100px;}}}}.footer {height: auto;padding: 0 10px;}
}
.table-btn {margin: 0;padding: 0 5px;
}
.custom-table-column-header-amount-unit-div {text-align: justify;text-align-last: justify;
}
.custom-table-row-default-amount-unit-div {display: flex;justify-content: space-between;
}
</style>

后端分頁相關代碼：ReagentServiceImpl.java

    // 查詢試劑列表@Override@Transactional(readOnly = true) // 優化性能，避免寫鎖public PageBean<Reagent> query(ReagentQueryDTO queryDTO) {PageHelper.startPage(queryDTO.getPageHelper().getPage(), queryDTO.getPageHelper().getSize());List<Reagent> reagentList = reagentMapper.select(queryDTO, PublicUtils.getUserName());Page<Reagent> reagentPage = (Page<Reagent>) reagentList;return new PageBean<>(reagentPage.getTotal(), reagentPage.getResult());}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/87120.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/87120.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/87120.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

LoadRunner 2023 安裝部署

LoadRunner 2023 安裝部署

下載地址&#xff1a;鏈接: https://caiyun.139.com/w/i/2nQQRYCZ1Ssjl 提取碼:3gz0 復制內容打開139-云盤 主要下載Micro_Focus_LoadRunner_2023_Community_Edition.exe來安裝就可以。 如要漢化&#xff0c;則再下載安裝Language_Packs.exe的安裝包 說明&#xff1a;LoadR…
閱讀更多...
ABC410 ： F - Balanced Rectangles

ABC410 ： F - Balanced Rectangles

https://atcoder.jp/contests/abc410/tasks/abc410_fhttps://atcoder.jp/contests/abc410/tasks/abc410_f首先可以一眼看出暴力 &#xff1a;枚舉左上角和右下角&#xff0c;用前綴和算出矩形中#的數量&#xff0c;判斷即可 但這樣是,爆!!! 考慮優化&#xff0c;我們可以枚舉…
閱讀更多...
嵌入式學習筆記 - HAL庫對外設的封裝

嵌入式學習筆記 - HAL庫對外設的封裝

一 外設封裝結構 HAL庫對外設的封裝使用了xx_HandleTypeDef類型的外設句柄結構體&#xff0c;這個句柄結構體的第一個成員Instance(xx_TypeDef類型)一般為該外設的所有寄存器的起始基地址&#xff0c;第二個成員Init&#xff08;xx_InitTypeDef類型&#xff09;一般為該外設的設…
閱讀更多...
高精度模板

高精度模板

加法 P1601 AB Problem&#xff08;高精&#xff09; #include<iostream>using namespace std; const int N 1e6 10; int a[N],b[N],c[N]; int len1,len2,lenMax; //長度要提前定義在全局&#xff0c;在函數中要使用 void add(int c[],int a[],int b[]) {for(int i0…
閱讀更多...
monorepo使用指北

monorepo使用指北

| ?WARN? node_modules is present. Lockfile only installation will make it out-of-date ?ERR_PNPM_FETCH_404? GET https://registry.npmjs.org/common%2Fcommon: Not Found - 404 This error happened while installing a direct dependency of G:\monorepo\vue3 comm…
閱讀更多...
Java八股文——Spring「MyBatis篇」

Java八股文——Spring「MyBatis篇」

與傳統的JDBC相比&#xff0c;MyBatis的優點&#xff1f; 面試官您好&#xff0c;MyBatis相比于傳統的JDBC&#xff0c;它并不是要完全顛覆JDBC&#xff0c;而是作為JDBC的一個強大的“增強框架”。它的核心價值在于&#xff0c;在保留了SQL最大靈活性的前提下&#xff0c;極大…
閱讀更多...
JavaScript基礎-常用的鼠標事件

JavaScript基礎-常用的鼠標事件

一、前言 在前端開發中&#xff0c;鼠標事件 是實現用戶交互的重要手段之一。通過監聽用戶的點擊、移動、懸停等操作&#xff0c;我們可以構建出豐富而靈活的網頁交互體驗。 本文將帶你深入了解&#xff1a; JavaScript 中常見的鼠標事件&#xff1b;各類鼠標事件的觸發時機…
閱讀更多...
windows錄頻軟件

windows錄頻軟件

一.很反感有些做軟件的&#xff0c;把別人開源的改個界面收費&#xff0c;所以我找了一個開源免費的。 二.準備工具 一臺電腦&#xff0c; Captura:完全開源免費的錄頻軟件。 ffmpeg&#xff1a;音頻格式轉換軟件&#xff0c;這可是非常大名鼎鼎的工具。 三.安裝Captura 網址…
閱讀更多...
python中的模塊化編程：日期模塊、math算術模塊、random模塊

python中的模塊化編程：日期模塊、math算術模塊、random模塊

內置模塊&#xff08;math、random、時間&#xff09;自定義模塊&#xff08;自己寫的部分代碼&#xff09;第三方模塊&#xff08;引入的第三方代碼庫的模塊&#xff09; math模塊 import math#圓周率 print(math.pi) #自然常數 print(math.e) #圓周率的二倍 print(math.tau…
閱讀更多...
【學習筆記】Langchain基礎（二）

【學習筆記】Langchain基礎（二）

前文&#xff1a;【學習筆記】Langchain基礎 文章目錄 8 [LangGraph] 實現 Building Effective Agents&#xff0c;各種 workflows 及 AgentAugmented LLMPrompt ChainingParallelizationRoutingOrchestrator-Worker (協調器-工作器)Evaluator-optimizer (Actor-Critic)Agent 8…
閱讀更多...
Java大模型開發入門 (9/15)：連接外部世界(中) - 向量嵌入與向量數據庫

Java大模型開發入門 (9/15)：連接外部世界(中) - 向量嵌入與向量數據庫

前言 在上一篇文章中&#xff0c;我們成功地將一篇長文檔加載并分割成了一系列小的文本片段&#xff08;TextSegment&#xff09;。我們現在有了一堆“知識碎片”&#xff0c;但面臨一個新問題&#xff1a;計算機如何理解這些碎片的內容&#xff0c;并找出與用戶問題最相關的片…
閱讀更多...
Windows下MySQL安裝全流程圖文教程及客戶端使用指南（付整合安裝包）

Windows下MySQL安裝全流程圖文教程及客戶端使用指南（付整合安裝包）

本教程是基于5.7版本安裝&#xff0c;5.7和8.0的安裝過程大差不差 安裝包「windows上mysql中安裝包資源」 鏈接&#xff1a;https://pan.quark.cn/s/de275899936d 一、安裝前的準備 1.1 獲取 MySQL 安裝程序 官網 前往 MySQL 官方下載頁面&#xff0c;下載適用于 Windows 系…
閱讀更多...
筆記 軟件工程復習

筆記 軟件工程復習

第一章 軟件工程學概述 1.1 軟件危機&#xff08;Software Crisis&#xff09; 概念 定義&#xff1a;軟件危機指在計算機軟件開發與維護過程中遇到的一系列嚴重問題&#xff0c;源于1960年代軟件復雜度激增與傳統開發方法失效的矛盾。 本質&#xff1a;軟件規模擴大 → 開…
閱讀更多...
GaussDB創建數據庫存儲

GaussDB創建數據庫存儲

示例一&#xff1a; 下面是一個簡單的GaussDB存儲過程示例&#xff1a; –創建一個存儲過程。 CREATE OR REPLACE PROCEDURE prc_add (param1 IN INTEGER,param2 IN OUT INTEGER ) AS BEGINparam2: param1 param2;dbe_output.print_line(result is: ||to_char(param…
閱讀更多...
基于51單片機的校園打鈴及燈控制系統

基于51單片機的校園打鈴及燈控制系統

目錄 具體實現功能 設計介紹 資料內容 全部內容 資料獲取 具體實現功能 具體功能&#xff1a; &#xff08;1&#xff09;實時顯示當前時間&#xff08;年月日時分秒星期&#xff09;&#xff0c;LED模式指示燈亮。 &#xff08;2&#xff09;按下“打鈴”和“打鈴-”按鍵…
閱讀更多...
PHP+mysql雪里開輕量級報修系統 V1.0Beta

PHP+mysql雪里開輕量級報修系統 V1.0Beta

# PHP雪里開輕量級報修系統 V1.0Beta ## 簡介 這是一個基于PHP7和MySQL5.6的簡易報修系統&#xff0c;適用于學校、企業等機構的設備報修管理。 系統支持學生提交報修、后勤處理報修以及系統管理員管理用戶和報修記錄。 初代版本V1.0&#xff0c;尚未實際業務驗證&#xff0c;…
閱讀更多...
XCTF-misc-base64÷4

XCTF-misc-base64÷4

拿到一串字符串 666C61677B45333342374644384133423834314341393639394544444241323442363041417D轉換為字符串得到flag
閱讀更多...
Mini DeepSeek-v3訓練腳本學習

Mini DeepSeek-v3訓練腳本學習

Mini DeepSeek-v3 訓練腳本詳細技術說明(腳本在文章最后) &#x1f4cb; 概述 這是一個實現了Mini DeepSeek-v3大語言模型的訓練腳本&#xff0c;集成了多項先進的深度學習技術。該腳本支持自動GPU選擇和分布式訓練&#xff0c;適合在多GPU環境下訓練Transformer模型。 &…
閱讀更多...
FPGA 的硬件結構

FPGA 的硬件結構

FPGA 的基本結構分為5 部分&#xff1a;可編程邏輯塊&#xff08;CLB&#xff09;、輸入/輸出塊&#xff08;IOB&#xff09;、邏輯塊之間的布線資源、內嵌RAM 和內嵌的功能單元。 &#xff08;1&#xff09;可編程邏輯塊&#xff08;CLB&#xff09; 一個基本的可編程邏輯塊由…
閱讀更多...
算法專題八： 鏈表

算法專題八： 鏈表

1.兩數相加 題目鏈接&#xff1a;2. 兩數相加 - 力扣&#xff08;LeetCode&#xff09; /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode…
閱讀更多...
最新文章

Copyright @ 2022~2023