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

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

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

刪除之后

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

刪除之后

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

data中的部分定義：

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

methods中的部分代碼：

/** *刪除數(shù)據(jù)API，批量刪除時(shí)，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 || //最后一頁(yè)，只有一條數(shù)據(jù)時(shí)，點(diǎn)擊表格中刪除按鈕 (delFlag == "volumeDelete" && this.totalCount - (this.currentPageIndex - 1) * this.pageSizeNum == this.selectArr.length) //最后一頁(yè)，點(diǎn)擊批量刪除按鈕時(shí) ) { //處理頁(yè)碼顯示問(wèn)題 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)前頁(yè)碼 pageSize: pageSizeNum //每頁(yè)顯示的條目數(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ù)制代碼

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

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

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

總結(jié)

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

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