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

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

这时我们就需要去判断当前删除的是否为最后一页的最后一条数据,如果是,我们删除后要将当前页码-1再查询,这样页码回到了上一页,查询出来的也是上一页的数据了,话不多说下面爷直接上代码:

// template模板
<el-table-column label="操作">
    <template slot-scope="scope">
    <el-button type="danger" @click="del(scope.row.id)">
        删除
    </el-button>
    </template>
</el-table-column>

// 删除方法:
async del(id) {
        // 调用接口根据id删除
        await deleteLexiconClassification({ id });
        // 判断当前删除的是否为最后一页的最后一个记录
        // 遍历词库列表
        this.repositoryCategoryList.forEach((item, index) => {
        // 如果当前id是要删除的id
        if (item.id === id) {
            // 判断规则:（当前页码-1）*页容量+要被删除项的索引+1===总条数 && 判断被删项索引是否为0 && 当前不是第一页
            if (
            (this.currentPage - 1) * this.pageSize + index + 1 ===
                this.total &&
            index === 0 &&
            this.currentPage > 1
            ) {
            // 如果是就将页码回到上一页
            this.currentPage--;
            }
        }
        });
        // 回显删除后的列表
        this.fetchRepositoryCategory();
}

这里顺带附上分页相关的公式,怕要用到时忘记怎么写:

1.判断当前是否为最后一页最后一个数据:

// 方法1(推荐):
// （页码-1）*页容量+当前操作的元素的索引+1 === 总条数(也就说明是最后一页中的记录) && 当前操作的元素的索引 === 0(也就说明是第一个记录)
if(this.currentPage - 1) * this.pageSize + index + 1 === this.total && index === 0){
    console.log(index,'是最后一页最后一个记录')
}


// 方法2:
// 先算出总页数 = 向上取整(总记录数/页容量)
const totalPage = Math.ceil(this.total/this.pageSize) 
// 当总页数 === 当前页码(也就是最后一页时) && 要操作的记录索引为0(也就是当前页的第一个的意思) && 当前页数据总条数===1(只有一个时)
if(totalPage === this.currentPage && index === 0 && this.list.length === 1){
    console.log(index,'是最后一页最后一个记录')
}

2.判断当前是否为最后一条数据:

// （页码-1）* 页容量 + 要操作的记录的索引 + 1 === 总条数
if(( this.currentPage - 1) * this.pageSize + index + 1 === this.total){
    console.log(index,'是最后一条记录');
}

相信有些小伙伴就有疑问了,为啥index要+1?因为索引比长度要小1,所以要判断数量是否等于总记录数就要+1来计算长度