解决element表格删除最后一页的数据时,页面置空

506 阅读1分钟

情景描述:

使用element表格时,若删除最后一页仅有的一条数据,页面会出现以下情况,显示暂无数据: image.png

解决方法:

对将要删除的数据所在页数进行判断,若大于删除该数据后的实际总页数,则将页面跳转至前一页,主要代码如下:

data() {
        return {
            // 查询条件
            queryInfo: {
                type: 3,
                // 当前的页数
                pagenum: 1,
                // 当前每页展示多少条数据
                pagesize: 5
            },
            // 商品分类的数据列表,默认为空
            cateList: [],
            // 总数据条数
            total: 0
        }
      }
async removeCateByID(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (confirmResult !== 'confirm') return this.$message.info('已取消删除')
            const { data: res } = await this.$http.delete(`categories/${id}`)
            if (res.meta.status !== 200) return this.$message.error('删除分类失败!')

            // 如果删除的数据在最后一页且该页仅此一条数据 删除后跳转到前一页
            if (this.queryInfo.pagenum > Math.ceil((this.total - 1) / this.queryInfo.pagesize))
                this.queryInfo.pagenum -= 1
            this.getCateList()
            return this.$message.success('删除分类成功!')

        }