vue项目中表格删除数据页码显示注意点
在做管理系統(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 加快xp关机速度
- 下一篇: vue3+vant移动端适配 px转换r