vue项目中表格删除数据页码显示注意点

在做管理系统的过程中，想必大家都接触过表格的增删改查吧，最近我在项目中发现，对于表格删除和批量删除时，有个细节项目组的前端开发并没有注意到，显然也没有去处理，测试人员居然也没去测试这个场景。

当我们表格切换页码至最后一页时，有两种场景。1、只有一条数据时，点击表格中删除按钮或者全选点击批量删除，2、多条数据全选点击批量删除。删除的时候我们需要对当前页码进行一个处理，要不然会显示异常。如下图

场景一：只有一条数据时，点击表格中删除按钮或者全选点击批量删除

删除之后

场景二：多条数据全选点击批量删除

删除之后

这样的显示效果显然是不正确的，因此我们必须要做一些处理，处理的代码（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"都是代指。

转载于:https://juejin.im/post/5c2b483d51882575f56054f8