vue elementui table表格+分页 删除末尾页唯一的一条数据后,页面自动跳转到上一页的js判断
这个问题通常是因为删除数据后,表格数据总数不能被分页大小整除,导致分页组件计算当前页面时出现错误,从而自动跳转到上一页。
解决方法:
- 删除数据后,先计算新的数据总数,如果数据总数为1且当前页为最后一页,则保持当前页不变或者跳转到前一页。
- 在删除数据后,如果当前页的数据只剩一条,并且这是最后一页,则可以手动跳转到前一页,并刷新数据。
示例代码:
// 删除数据的方法
deleteData(index, data) {
// 执行删除操作...
// 删除后重新获取数据总数
this.getDataCount();
// 如果删除后只剩一条数据且当前页为最后一页
if (this.tableData.length === 1 && this.currentPage === this.totalPage) {
// 手动跳转到前一页
this.currentPage = this.currentPage - 1;
if (this.currentPage < 1) {
this.currentPage = 1;
}
// 重新加载当前页的数据
this.loadData(this.currentPage);
}
},
// 获取数据总数的方法
getDataCount() {
// 假设有个方法fetchDataCount可以获取数据总数
this.fetchDataCount().then(count => {
this.totalCount = count;
this.totalPage = Math.ceil(this.totalCount / this.pageSize);
});
},
// 加载数据的方法
loadData(page) {
// 假设有个方法fetchData可以获取分页数据
this.fetchData(page, this.pageSize).then(data => {
this.tableData = data;
});
}
在这个示例中,deleteData
方法用于处理删除操作,在删除后会计算新的数据总数,并判断是否需要手动跳转页面。getDataCount
方法用于获取更新后的数据总数,loadData
方法用于加载特定页的数据。注意,这些方法需要根据实际的API和数据结构进行适当的修改。
评论已关闭