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-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>