用vue+element 写后台管理系统,是很常见的项目。其中,element的table表格和分页功能,常常会配合使用。
这里,有一个关于删除的重要细节
如图示,在表格只有最后一条数据时候,删除的请求,如果只是把id上传去删除,然后做请求成功和失败的处理,就会出现删除后,重新获取所有列表的页码仍然是第二页。但实际上删除了这条数据,应该只剩下一页的数据数据了。导致页面出现暂无数据。
如图中,删除后,重新请求所有数据的请求,页码是2,但实际上,页面只剩下1页了,所以请求不到数据。
于是,我们应该在删除后,重新请求前,做个判断
fnDelBurl(id) {
this.$confirm('此操作将永久删除该节, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async() => {
//这里是删除操作
const { data: res } = await delClass(id)
//这里是删除失败后的处理
if (res.error) return this.$message.error('删除失败')
//!!!!!!important这里是重点
//这里,就是添加个判断,如果页面上,只有一条数据了,且页码不是最后一页。就减少页码
if (this.tableData.length === 1 && this.pageData.page > 1) {
this.pageData.page -= 1
}
//这里是重新请求所有数据,重新请求所有数据里会包含当前data中的页码和条数
this.fnGetData()
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},