In the process of doing the management system, we must have been in contact with the increase, deletion, change and check of the table, recently I found in the project, for the table deletion and batch deletion, there is a detail that the front end development of the project team did not notice, obviously did not deal with, the tester actually did not test this scene.

When we switch to the last page of the table, there are two scenarios.

  1. When there is only one data, click delete button in the table or click batch delete for all;
  2. Select all multiple pieces of data and click Batch delete

When deleting, we need to perform a process on the current page number, otherwise we will display an exception: the original page with data does not display data, because the page number has not changed. This display is obviously not correct, so we have to do some processing, processing code (axios is not wrapped, data key: “value”, token: “XXX”, url = “url” are proxy, code and actual project made some changes, BELIEVE you can see:

Partial definitions in data:

totalCount: 0.// Total entries
currentPageIndex: 1.// Current page number
pageSizeNum: 10.// The number of items displayed per page
selectArr: [].// Delete the selected data replication code in batches
Copy the code

Part of the code in Methods:

    /** * delete data API, batch delete, key is string with ',' concatenate *@param {String} ParamData: indicates the deleted data *@param {String} DelFlag :"volumeDelete" indicates a batch deletion. This parameter is optional. */
    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 (    
                // On the last page, when there is only one entry, click the delete button in the table
                this.totalCount - (this.currentPageIndex - 1) * this.pageSizeNum == 1 || (delFlag == "volumeDelete" && this.totalCount - (this.currentPageIndex - 1) * this.pageSizeNum == this.selectArr.length)) // On the last page, click the batch delete button
                {            
                    // Handle page number display issues
                    this.currentPageIndex = this.currentPageIndex == 1 ? this.currentPageIndex : this.currentPageIndex - 1;          
                 }          
                this.queryTableData(); }}); },/** * query data API */    
    queryTableData() {      
        let url = "url";      
        let data = {        
            key: "value"      
         };      
        let page = {        
            index: currentPageIndex, // Current page number
            pageSize: pageSizeNum // The number of items displayed per page
         };      
        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)); // Get table data
                this.totalCount = res.data.totalCount; // Get the total number of entries
                this.selectArr = []; // Clear the selected data for batch deletion}}); } Duplicate codeCopy the code

The current page number is processed in the delete interface, the total number of entries is obtained in the query data interface, and the data selected for batch deletion is emptied.

Again, this code is just for presentation, not for actual project code, so it does not encapsulate AXIos. Data key: “value”, token: “XXX”, url = “URL” are all proxy references