解决Vue+Element-ui表单组件的删除功能删除角色的分页异常问题

友友们，今天和大家分享一个Vue+Element-ui中常见的表单组件的删除功能删除角色的分页异常问题

问题复现

如果删除最后一页的最一条数据之后，页面会显示不正常

原因

如果删除第最后一页（假设是第4页）的最一条数据之后，再发请求，还是求的第4页，而此时，后端已经求不到第4 页的数据了（被删除了）。

思路

在删除成功之，去检测一下，是否当前删除的是当前页最后一条数据，如果是，就把页码-1，再发请求

代码实现：

async doDel(id) {
try {
const res = await deleteRole(id)
console.log(res)
// 1. 提示
this.$message.success('删除成功')

// 2. 如果当前表格中只有一条，删除之后自动请求上一页数据
 if (this.roles.length === 1) {
 this.pageParams.page--
if (this.pageParams.page <= 0) {
 this.pageParams.page = 1
}
 }

// 3. 重新请求，请求数据
this.loadRoles()
} catch (err) {
console.log(err)
this.$message.error('删除失败')
}
}