ElementUI分页与增删改合并

之前有做过表格增删改与分页效果，今天闲着没事，把两个合并试了试，主要合并之后有一个问题，如果第二页有一条数据，删除后不会跳转到上一页，之前因为删除数据有点问题（自己写的bug），导致结果偏差，以为方法不可行，后来被人指点，修改以后方法可行

具体思路很简单，如果总数据对每页存放最大数据求余，如果余数为1，当前页数-1，因为当时试了element里面的分页，如果只有1页，跳转第0页，还是会在第一页，不会变化，所以不考虑0或者负数

如果有不合适的地方希望大佬指正，谢谢

废话不多说，直接上代码

<template><el-row><el-row><el-col :span="3"><el-button type="success" @click="adds()">新增</el-button></el-col></el-row><el-tablestripev-loading="loading"style="width: 100%":data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"><el-table-column type="index" width="50">  </el-table-column><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-column ><!-- 让弹框显示 --><template slot-scope="scope"><el-button type="primary" @click="sets(scope.row)">修改</el-button><el-button type="danger" @click="removes(scope.row)">删除</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 40]" :page-size="pagesize"    layout="total, sizes, prev, pager, next, jumper":total="tableData.length">  </el-pagination><el-dialog title="新增" :visible.sync="el_show"><el-form><el-form-item label="日期" :label-width="formLabelWidth"><el-input v-model="date" autocomplete="off"></el-input></el-form-item><el-form-item label="姓名" :label-width="formLabelWidth"><el-input placeholder="请输入姓名" v-model="name" autocomplete="off"></el-input></el-form-item><el-form-item label="地址" :label-width="formLabelWidth"><el-input placeholder="请输入地址" v-model="address" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="pushs()">新 增</el-button><el-button  @click="err()">取 消</el-button></div></el-dialog><el-dialog title="修改" :visible.sync="el_xiu"><el-form><el-form-item label="日期" :label-width="formLabelWidth"><el-input v-model="newtable.date" autocomplete="off"></el-input></el-form-item><el-form-item label="姓名" :label-width="formLabelWidth"><el-input placeholder="请输入姓名" v-model="newtable.name" autocomplete="off"></el-input></el-form-item><el-form-item label="地址" :label-width="formLabelWidth"><el-input placeholder="请输入地址" v-model="newtable.address" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="trueset()">修 改</el-button><el-button  @click="xg_err()">取 消</el-button></div></el-dialog></el-row>
</template><script>export default {data() {return {currentPage:1, //所在页是第几页pagesize:5,  //  每页的数据tableData: [{date: '2019-12-02',name: '余香',address: '上海市普陀区金沙江路 1518 弄',id:1}, {date: '2019-12-02',name: '驻马店西',address: '上海市普陀区金沙江路 1517 弄',id:2}, {date: '2019-12-02',name: '安河桥北',address: '上海市普陀区金沙江路 1519 弄',id:3}, {date: '2019-12-02',name: '高米店南',address: '上海市普陀区金沙江路 1516 弄',id:4},{date: '2019-12-02',name: '刚刚好',address: '上海市普陀区金沙江路 1516 弄',id:5},{date: '2019-12-02',name: '麻雀',address: '上海市普陀区金沙江路 1516 弄',id:6}],all:0,   //当前所有数据条数el_show:false,   //新增弹框显示隐藏el_xiu:false,    //修改弹框显示隐藏date:"",name:"",address:"",newtable:{date:"",name:"",address:"",},   //修改内容暂存区formLabelWidth: '120px',loading:true,newid:0   //存储点击的id}},created(){this.loading=false},updated(){this.all=this.tableData.length},methods:{// 初始页currentPage、初始每页数据数pagesize和数据datahandleSizeChange: function (size) {this.pagesize = size;console.log(this.pagesize+"====每页几条") //每页下拉显示数据},handleCurrentChange(currentPage){this.currentPage = currentPage;console.log(this.currentPage+"=====前往第几页") //点击第几页},//新增让弹框显示adds:function(){console.log(document.getElementsByTagName("tr").length)this.el_show=true;},//取消让弹框隐藏err:function(){this.el_show=false;},//删除某条信息removes:function(v){this.newid=this.tableData.findIndex((item)=>{return item.id==v.id;})// if(parseInt(this.all%this.pagesize)==0){//     this.currentPage=this.currentPage-1// }this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});// this.handleCurrentChange(this.currentPage);this.tableData.splice(this.newid,1);   //删除代码//如果最后一页数据为1，删除后页数-1if(parseInt(this.all%this.pagesize)==1){this.currentPage=this.currentPage-1}}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });},//新增pushs:function(){if(!this.date||!this.name||!this.address){this.$message.error('内容不能为空');return;}//使用map方法获取到id的最大值let ids = Math.max(...this.tableData.map(function(item){return item.id}))+1;this.tableData.push({date:this.date,name:this.name,address:this.address,id:ids})this.$message({message: '创建成功',type: 'success'});this.date="",this.name="",this.address="",this.el_show=false;},//修改//弹出框 显示sets:function(val){this.el_xiu=true;console.log(val)this.newtable={date:val.date,name:val.name,address:val.address,id:val.id}},xg_err:function(){this.el_xiu=false;},//保存修改trueset:function(){console.log(this.newtable.date+"===")for(var i=0;i<this.tableData.length;i++){if(this.tableData[i].id==this.newtable.id){this.tableData[i].date=this.newtable.date;this.tableData[i].name=this.newtable.name;this.tableData[i].address=this.newtable.address;this.tableData[i].id=this.newtable.id;this.el_xiu=false;}}}}}
</script>
<style scoped>.el_tan{background-color: #eee;position: absolute;top: 0;left: 0;right: 0;margin: 20% auto;}
</style>

ElementUI分页与增删改合并相关推荐

SpringBoot的开发(3)--前端页面的搭建、前端页面的编写、分页和增删改查功能的实现...
前端页面的搭建首先我们在resources包下新建一个文件夹static,SpringBoot默认会去把static包下的文件做一个路由然后在static包下新建一个HTML File类型的文件, ...
商品管理系统商品分页，增删改查的实现增加购物车的功能Cart
添加购物车前提条件:你的商品的页面有已经设计成功,有全选,全不选,反选这些操作的实现通过checkbox复选框的id进行添加商品,从而获取商品的名字和其他的信息增加成功后通过Ajax请求进行相关的 ...
php ajax 增删改查分页,Jquery之Ajax_分页及增删改查
一.UserInfoList.html代码用户列表添加用户编号用户名密码邮箱时间删除详细编辑用户名密码邮箱用户名密码邮箱用户名密码邮箱二.UserList.ashx.cs代码 ...
创建vue+iview项目实现分页增删改查功能
iview+vue实现分页增删改查功能一. 后台代码二.前端工具是webstorm,直接上测试相应js接口三.相应的页面四.效果展示上一片文章总结了下如何创建一个vue项目,前端框架使用iv ...
layui进行分页处理，后端返回数据没有count字段，需要单独获取再添加到数据中，再进行项渲染，另有layui表格数据增删改查前后端交互
整体效果图如下: (1)分页前端界面处理 (2)分页后端的数据处理具体代码如下: 前端界面代码:包括分页,增删改查,刷新(搜索功能还没做,后端是java代码) <!DOCTYPE html&g ...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
SpringBoot-Vue实现增删改查及分页小DEMO
SpringBoot-Vue实现增删改查及分页小DEMO 前言主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot ...
SpingBoot中使用MyBatis和pagehelper实现数据的增删改查和分页
文章目录一.认识MyBatis CRUD注解映射注解高级注解二.用MyBatis实现数据的增加.删除.修改.查询和分页 1.创建springboot项目并引入依赖 2.实现数据表的自动初始化 ...
ElementUI中使用el-calendar实现基于日历的节假日的增删改查
场景前端使用ElementUI的el-calendar组件实现可视化的节假日的增删改查. 主页面显示效果如下点击日历组件上的某天进行新增节假日时点击已经存在的节假日编辑时博客: https:/ ...

ElementUI分页与增删改合并

具体思路很简单，如果总数据对每页存放最大数据求余，如果余数为1，当前页数-1，因为当时试了element里面的分页，如果只有1页，跳转第0页，还是会在第一页，不会变化，所以不考虑0或者负数

ElementUI分页与增删改合并相关推荐

最新文章

热门文章