基于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是要删除的idif (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来计算长度

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

vue element 表格增加删除修改数据
这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改效果如下: 表格的table: <el-table :data="tableData" st ...
vue element table列表删除某一页的最后一条数据之后页面不自动跳到上一页
项目场景:element 分页器提示:这里简述项目相关背景: 例如:项目场景:删除某一页的最后一条数据之后页面不自动跳到上一页解决方案: <el-pag ...
html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
基于Vue+Element Plus实现快速导航
文章目录前言一.分析二.实现三.实现效果图总结前言快速导航对于前端开发的靓仔们应该是很熟悉了,他能快速的切换到之前打开的页面,是系统更加灵活方便.我这里采用的是Vue+Element p ...
基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
vue element 表格错位
vue element 表格发生错位对不齐的问题在做vue element 表格的时候,页面展示上发现列表对不齐 <style scoped> /deep/ .el-table th.g ...
RuoYi Vue - 若依框架的 Vue 版本，免费开源、生态强大、专业的 admin 后台管理系统，基于 Vue + Element
有一段时间没有推荐 admin 框架了,若依这款后台框架很强大,提供了 vue 版本,很实用,推荐给大家. 关于若依 RuoYi 中文名称叫若依,名字十分二次元,是一个后台管理系统,后端基于经典技术组 ...
vue element表格某一列内容过多，超出省略号显示
vue element表格某一列内容过多,超出省略号显示 iview表格某一列内容过多,超出省略号显示

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

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

最新文章

热门文章