【vue-el-table】删除功能-处理页码边界问题

删除功能-处理页码边界问题

页码边界问题

思路：是页数在只剩一条数据的情况下删除此条数据,此页为空,我们要修改这个问题让它显示为上一页,在删除的时候对这一页的数据进行判断,如果数据长度为1即为删除最后一条数据,我们就在走渲染页面时让页码-1,就会在删除最后一条数据时渲染上一组数据

完整代码:

 handleDelete(row) {//由于我修改和删除用的同一个页面,这里只是拿来修改标识this.isEdit = false
// 确认框this.$confirm('此操作将永久删除, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//删除接口delUser(row.id)//处理页码边界问题if (this.form.length === 1) {this.page--if (this.page <= 0) {this.page = 1}}//调用重新渲染函数this.renderSettingList()this.$message({type: 'success',message: '删除成功!'})}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})},

【vue-el-table】删除功能-处理页码边界问题相关推荐

基于Ant Design vue框架之三删除功能细分
我们还是老规矩,先上效果图吧~~ 需要看整个页面的小盆友可以点下面这个路径哈~~ 页面路径:总页面展示继续上干货吧~翠花,上代码~~ <a-button type="danger&q ...
Vue之通过连接数据库的接口获取列表实现添加删除功能
把最近学习vue的一些知识点记录下来,今天记录一下Vue通过vue-resource连接数据库接口渲染列表和添加删除功能首先我们得引入vue的版本文件和vue-resource.js,注意:vue- ...
纯前端vue+bootstrap实现图书管理系统的添加、删除功能
1.纯前端vue+bootstrap实现图书管理系统的添加.删除功能最终效果界面 2.添加效果 3.删除效果 4.前端代码:图书管理系统.html <!DOCTYPE html> < ...
html表格上下移动,Vue实现table上下移动功能示例
本文实例讲述了Vue实现table上下移动功能.分享给大家供大家参考,具体如下: 结合Element组件,scope中有三个参数(row,cow,$index)分别表示行内容.列内容.以及此行索引值, ...
七牛云阿里云图片存储新增套餐分页定时任务Quartz（作业：编辑和删除功能）
@TOC 第4章预约管理-套餐管理今日目标: 熟悉图片存储方案掌握七牛云图片上传掌握新增套餐并图片上传到七牛云掌握体检套餐分页展示熟悉定时调度任务Quartz 1. 图片存储方案 1.1 ...
vue之table案例
实现步骤: ① 搭建项目的基本结构 ② 请求商品列表的数据 main.js中全局配置axios import axios from "axios";const app = crea ...
用vue实现购物车小功能
实现效果图: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
使用vuejs实现简单的图书增加删除功能
概要: 1.实现删除功能. 2.实现增加功能. 代码: css table,td{border: 1px solid #ccc;border-collapse: collapse;}table,fie ...
用Vue来实现购物车功能（二）
这个小demo具有添加商品进购物车 .增加购物车内商品的数量.减少购物车内商品的数量.计算一类商品的总价.以及计算所有商品的总价首先看目录结构因为我们的Tab.vue Car.vue 以及Car ...

【vue-el-table】删除功能-处理页码边界问题

删除功能-处理页码边界问题

页码边界问题

【vue-el-table】删除功能-处理页码边界问题相关推荐

最新文章

热门文章