elementui添加表格数据后跳转至最后一页

elementui添加表格数据后跳转至最后一页

最近在使用elementui用了其表格以及分页功能（el-pagination），然后在编写添加数据功能时想着，添加新数据之后，应该要跳转到尾页才符合直觉。解决方法如下：

首先是data数据，添加一个pagination变量（名称可以自定义）：

pagination: {
  pagesize: 10,
  currentPage: 1
}

然后在分页组件处编写编写以下代码：

<el-pagination
   background
   ref="pagination"
   :current-page.sync="pagination.currentPage"
   :page-size="pagination.pagesize"
   layout="prev, pager, next"
   :total=total
   @current-change="page">
</el-pagination>

其中主要实现功能的就是与pagination相关的代码，其中sync是为了避免页面跳转成功，但是页码为改变的双向绑定措施

最后就是添加方法处的代码添加：

submitForm(formName) {
    const _this = this
    this.$refs[formName].validate((valid) => {
        if (valid){
            this.axios.post('http://localhost:8081/role/addrole',this.role_form).then(function(resp){
                if (resp.data == '成功添加1个角色'){
                    _this.$alert(_this.role_form.version+'半版本角色信息添加成功！','OK',{
                        confirmButtonText: '确定',
                        callback: action => {
                            // 提交成功后跳转至表格尾页
                            _this.pagination.currentPage 
                                = Math.ceil(++_this.total / _this.pagination.pagesize)
                            _this.page(_this.pagination.currentPage)
                        }
                    });
                }
                else{
                    return false;
                }
            })
        }
    });
}

至此就完成了这一功能，在网上寻求解决方法的时候，发现虽然有但是具体的位置不是很清晰，故在此记录