基于Vue+element表格删除最后一页的最后一条数据后回显数据为空解决

在项目中，当我们在删除最后一页的最后一条数据时,我们想要的效果是回到上一页,查询处上一页的数据显示出来,当前页码变成上一页,而真正删除的时候显示出来是个空的,而且页码也还在当前页

第一种情况

一般情况下，后端返回的表格数据都会把数据的总数，一页展示的条数，总页数，当前第几页返回给前端，那么我们之间判断当前页码与后端返回的总页码进行比较就可以了

• 注意：只判断当前页大于后端返回的总页数是不行的，如果返回的数据为空则会进入死循环，所以我们要判断返回的总页数是否大于0

async fetchData () {
      try {
        let data = {
          ...this.listQuery,
          ...this.searchData
        }
        let result = await fetchData(data)
        // 表格数据
        this.tableData = result.recordList || []
        // 总数
        this.total = result.recordCount || 0
       
        if (result.pageCount>0&&this.listQuery.pageIndex > result.pageCount) {
          this.listQuery.pageIndex = result.pageCount
          this.fetchData()
        }
      } catch {
        this.tableData = []
        
      }
    }

• total: 总数
• pageCount：总共多少页
• pageIndex：当前页

第二种情况

如果后端只返回了总数给前端的话，那么我们就要根据一页展示的条数来进行计算总页数了

async fetchData () {
      try {
        let data = {
          ...this.listQuery,
          ...this.searchData
        }
        let result = await fetchData(data)
        // 表格数据
        this.tableData = result.recordList || []
        // 总数
        this.total = result.recordCount || 0
        let pageCount =  Math.ceil(this.total/this.listQuery.pageSize)
        if (pageCount>0&&this.listQuery.pageIndex > pageCount) {
          this.listQuery.pageIndex = result.pageCount
          this.fetchData()
        }
      } catch {
        this.tableData = []
        
      }
    }

• total: 总数
• pageCount：总共多少页
• pageIndex：当前页
• pageSize：一页展示的条数