之前有做过表格增删改与分页效果，今天闲着没事，把两个合并试了试，主要合并之后有一个问题，如果第二页有一条数据，删除后不会跳转到上一页，之前因为删除数据有点问题（自己写的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-table
stripe
v-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-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="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和数据data
handleSizeChange: 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，删除后页数-1
if(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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
