vue+element写后台管理系统时，表格和分页功能的一个注意事项（容易忽略的重要细节）

用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: '已取消删除'
          })
        })
    },