vue + element-ui 删除表格数据可能引起的bug

开发环境

vue + element-ui

问题描述

当我们用到table表格组件功能的时候，通常会采用后端分页（默认了解后端分页），在做批量删除或者单行删除时候，如果我们在最后一页删除当前页的全部数据，删除成功后，会继续刷新页面，重新获取当前页的数据，这时候获取到数据会为空，可是我们是有数据的呀，只是当前页没有数据，因为删除成功后，数据总条数变少了，前端根据返回的total数据计算页码，页数也减1了，这时候出现没有当前页码的bug，而且当前页没有数据

解决思路

获取数据列表时候，根据返回的数据列表长度进行判断，如果没有数据而且还不是最后一页，则将页码减1后，重新获取数据列表

代码

data() {
    return {
    	params: {
	        query: '', // 关键字
	        page_num: 1, // 页码
	        page_size: 10, // 每页个数
      },
    }
 }

  getData(){
  //获取数据列表axios请求
     getHostList(this.params).then((res) => {
        this.hostList = res.data.list || []; //从api获取数据
        // 当前页删除完后，page减1
        if (!this.hostList.length && this.params.page_num > 1) {
          this.params.page_num--;
          this.getHostObjList();
        }
        this.total = res.data.total;
      });
}