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

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

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

刪除之后

場景二：多條數(shù)據(jù)全選點擊批量刪除

刪除之后

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

data中的部分定義：

totalCount: 0, //總條目數(shù) currentPageIndex: 1, //當(dāng)前頁碼 pageSizeNum: 10, //每頁顯示的條目數(shù) selectArr: [],//批量刪除選擇的數(shù)據(jù)復(fù)制代碼

methods中的部分代碼：

/** *刪除數(shù)據(jù)API，批量刪除時，key為字符串以','拼接 * @param {String} paramData:刪除的數(shù)據(jù) * @param {String} delFlag:"volumeDelete"表示批量刪除，可選參數(shù) */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 || //最后一頁，只有一條數(shù)據(jù)時，點擊表格中刪除按鈕 (delFlag == "volumeDelete" && this.totalCount - (this.currentPageIndex - 1) * this.pageSizeNum == this.selectArr.length) //最后一頁，點擊批量刪除按鈕時 ) { //處理頁碼顯示問題 this.currentPageIndex = this.currentPageIndex == 1 ? this.currentPageIndex : this.currentPageIndex - 1; } this.queryTableData(); } }); },/** *查詢數(shù)據(jù)API */ queryTableData() { let url = "url"; let data = { key: "value" }; let page = { index: currentPageIndex, //當(dāng)前頁碼 pageSize: pageSizeNum //每頁顯示的條目數(shù) }; 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)); //獲取表格數(shù)據(jù) this.totalCount = res.data.totalCount; //獲取總條目數(shù) this.selectArr = []; //清空批量刪除選擇的數(shù)據(jù) } }); } 復(fù)制代碼

在刪除接口中對當(dāng)前頁碼進(jìn)行了處理，在查詢數(shù)據(jù)的接口中獲取總條目數(shù)，并且清空批量刪除選擇的數(shù)據(jù)。

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

轉(zhuǎn)載于:https://juejin.im/post/5c2b483d51882575f56054f8

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。