vue項目中表格刪除數據頁碼顯示注意點

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

當咱們表格切換頁碼至最後一頁時，有兩種場景。一、只有一條數據時，點擊表格中刪除按鈕或者全選點擊批量刪除，二、多條數據全選點擊批量刪除。刪除的時候咱們須要對當前頁碼進行一個處理，要否則會顯示異常。以下圖

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

刪除以後

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

刪除以後

這樣的顯示效果顯然是不正確的，所以咱們必需要作一些處理，處理的代碼（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"都是代指。