在做管理系統的過程中，想必大家都接觸過表格的增刪改查吧，最近我在項目中發現，對于表格刪除和批量刪除時，有個細節項目組的前端開發并沒有注意到，顯然也沒有去處理，測試人員居然也沒去測試這個場景。

當我們表格切換頁碼至最后一頁時，有兩種場景。1、只有一條數據時，點擊表格中刪除按鈕或者全選點擊批量刪除，2、多條數據全選點擊批量刪除。刪除的時候我們需要對當前頁碼進行一個處理，要不然會顯示異常。如下圖

場景一：只有一條數據時，點擊表格中刪除按鈕或者全選點擊批量刪除

刪除之后

場景二：多條數據全選點擊批量刪除

刪除之后

這樣的顯示效果顯然是不正確的，因此我們必須要做一些處理，處理的代碼（axios未做封裝，數據key: "value"， token: "XXX"，url = "url"都是代指，代碼與實際項目中項目做了一些調整，相信大家能看明白）如下：

data中的部分定義：

totalCount: 0, //總條目數 currentPageIndex: 1, //當前頁碼 pageSizeNum: 10, //每頁顯示的條目數 selectArr: [],//批量刪除選擇的數據復制代碼

methods中的部分代碼：

/** *刪除數據API，批量刪除時，key為字符串以','拼接 * @param {String} paramData:刪除的數據 * @param {String} delFlag:"volumeDelete"表示批量刪除，可選參數 */deleteTableItem(paramData, delFlag) { let url = "url"; let data = { key: "value" }; let param = { data: data, token: "XXX" }; axios.post(url, param).then(res => { if (res.data.code == 200) { if ( this.totalCount - (this.currentPageIndex - 1) * this.pageSizeNum == 1 || //最后一頁，只有一條數據時，點擊表格中刪除按鈕 (delFlag == "volumeDelete" && this.totalCount - (this.currentPageIndex - 1) * this.pageSizeNum == this.selectArr.length) //最后一頁，點擊批量刪除按鈕時 ) { //處理頁碼顯示問題 this.currentPageIndex = this.currentPageIndex == 1 ? this.currentPageIndex : this.currentPageIndex - 1; } this.queryTableData(); } }); },/** *查詢數據API */ queryTableData() { let url = "url"; let data = { key: "value" }; let page = { index: currentPageIndex, //當前頁碼 pageSize: pageSizeNum //每頁顯示的條目數 }; let param = { data: data, page: page, token: "XXX" }; axios.post(url, param).then(res => { if (res.data.code == 200 && res.data.data) { this.tableData = JSON.parse(JSON.stringify(res.data.data)); //獲取表格數據 this.totalCount = res.data.totalCount; //獲取總條目數 this.selectArr = []; //清空批量刪除選擇的數據 } }); } 復制代碼

在刪除接口中對當前頁碼進行了處理，在查詢數據的接口中獲取總條目數，并且清空批量刪除選擇的數據。

再次說明，此代碼只是為了展示，并非實際項目中的代碼，因此未對axios做封裝，數據key: "value"， token: "XXX"，url = "url"都是代指。

轉載于:https://juejin.im/post/5c2b483d51882575f56054f8

總結

以上是生活随笔為你收集整理的vue项目中表格删除数据页码显示注意点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。