vue element table列表删除某一页的最后一条数据之后页面不自动跳到上一页
例如项目场景删除某一页的最后一条数据之后页面不自动跳到上一页。
·
项目场景:element 分页器
提示:这里简述项目相关背景:
例如:项目场景:删除某一页的最后一条数据之后页面不自动跳到上一页
解决方案:
<!-- 分页组件 -->
<el-pagination
style="margin-top: 30px;"
background
:page-size="ruleForm.currentPageSize"
:page-sizes="[10, 20, 30, 40]"
layout="->,total,sizes, prev, pager, next, jumper"
:total="count"
:current-page.sync="ruleForm.currentPage"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
>
</el-pagination>
export default {
data() {
return {
ruleForm: {
currentPage: 1, // 当前页码
currentPageSize: 10, //每一页显示的条数
},
totalPage: 0, // 总页数
count: 0, // 数据总条数
pagerCurrentPage: 1, // 分页栏当前页码
};
},
created() {
//第一次进入页面的数据请求
this.fetchData();
},
methods: {
fetchData() {
//数据请求
findBlog(this.ruleForm).then(r => {
this.tableData = r.data.data.records;
this.count = r.data.data.total;
this.totalPage = Math.ceil(this.count / this.ruleForm.currentPageSize);
// 下面的 if 会在删除文章的时候可能会触发,例如最后一页只有一条数据
// 删除之后,总页码数就会减一,当前页码数就大于了总页码数,所以要做处理
if (this.ruleForm.currentPage > this.totalPage) {
this.ruleForm.currentPage = this.totalPage;
this.fetchData();
}
});
},
// 分页相关事件
sizeChangeHandle(pagerNum) {
// console.log(this.ruleForm, "每页条数");
this.ruleForm.currentPageSize = parseInt(pagerNum);
this.ruleForm.currentPage = 1;
this.pagerCurrentPage = 1;
this.fetchData();
},
currentChangeHandle(pageNum) {
// console.log(this.ruleForm, "第几页");
this.ruleForm.currentPage = parseInt(pageNum);
this.fetchData();
},
},
};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)