Elementui删除表格最后一页全部数据后跳到前一页的骚气写法

现代湿人

于 2020-12-08 16:33:05 发布

阅读量1.4k

点赞数 3

分类专栏： Elementui 文章标签：前端 elementui vue

本文链接：https://blog.youkuaiyun.com/weixin_47967683/article/details/110874627

版权

Elementui 专栏收录该内容

2 篇文章

订阅专栏

这篇博客探讨了在Vue.js应用中处理分页数据删除的问题，特别是当删除最后一页的数据时，如何确保currentPage正确更新。作者提出通过设置flag变量来跟踪tableData长度，并在单个或批量删除后调整currentPage。删除操作后，currentPage会根据删除的数量自动减1，从而实现平滑的分页体验。

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

造成这个原因是由于currentPage没有更新的原因，当最后一页的数据删除后，请求的current没有改变。
不要慌我的这种写法想跳哪一页就跳哪一页
这是分页参数
在这里插入图片描述
这是表格数据

我们可以给个变量flag，每次请求时把返回tableData长度给flag。

当单个删除操作时判断flag等于1，给currentPage减1，

当多个删除操作时就判断删除的数量长度（比如ids.length，rows.leng）是否等于flag,再给currentPage减1。

看代码

data() {
      return {
      	ids[],
      	tableData:[],
        flag: 0,
        pageQuery: {
          currentPage: undefined,
          pageSize: undefined,
          queryString: undefined
        }
      };
    },
    methods: {
	 deleteData() {
        axios.delete("/api/deleteOne").then(res => {
            //当flag===1时当前currentPage - 1
            if (this.flag === 1) {
              this.pageQuery.currentPage--;
            }
        }).finally(() => {
        //再次分页查询就跳转到上一页了。
          this.selectPage();
        })
      },
      removeDataIds(){
        this.$api.delete("/api/remove", {data: ids}).then(res => {
       		//多删除的时候也一样
              if (this.currentPageFlag === ids.length) {
                this.pageQuery.currentPage--;
              }
              this.selectPage();
    	}
      },
      selectPage() {
        axios.get("/api/list", {params: this.pageQuery}).then(res => {
          this.tableData= res.data;
          //后面flag=== 1时,对currentPage进行-1。
          this.flag = this.tableData.length;
        })
      }
  }