antd分页遇到删除的问题

最新推荐文章于 2023-10-10 16:11:55 发布

原创最新推荐文章于 2023-10-10 16:11:55 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#antd #pagination

antd 专栏收录该内容

6 篇文章

订阅专栏

本文针对分页时出现的页面空数据问题提供了解决方案。当删除数据导致当前页为空时，通过判断总条数和当前页数据量来决定是否减少页数，并重新加载数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.老大提出关于分页的问题，
这里写图片描述
问题是比如一共有6页数据，第六页只有一条数据。这时你删除第五页的某一条数据，第6页还在并且展示没有数据。
解决方案：加一个判断即可。

}).then(data => {
     console.log('得到列表总数：',data);
     this.setState({
         //列表页的总条数
         total: data.data
     },()=>{
         //总条数取模，如果等于0的话，说明是当前页已经删除完数据，这时需要把页数减1
         if( (this.state.total % 10) === 0 && this.state.dataLength === 0 ){
             //如果此页没有数据的话，页数减1
             console.log('111');
             this.setState({
                 pageIndex: --this.state.pageIndex,
             },()=>{
                 //页数减1之后调用接口得到全部数据
                 this.automaticDataList();
             })
         }else {
             console.log('222');
             //如果是随便删除数据的话，在下面的else中调用列表数据。
             //this.automaticDataList();
         }
     })
 }).catch((error) => {
     console.log(error);
 })