表格中的有删除操作，表格分页异常

引言

最近在做一个新需求，需求里面有个删除表格中一行的功能，其实这个需求很简单，但是很多开发者常常会忽略一个问题，不知道宝子们自己开发的时候是不是也会忽略。

问题

宝子们看下面的图片就会一目了然，原因是我们在删除最后一页最后一条的时候，是先请求删除接口后再请求表格当前页接口，问题就是我们在删除成功后页码还停留在最后一页，但是实际上最后一页已经没有了，但是我们给请求刷新表格当前页的接口还是最后一页的页码，如果后端接口没有特殊处理，会导致删除后，页码已经跳到前一页，但是表格没有数据。

代码：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="index" label="序号" width="180" />
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-button @click="showVisible = true" />
    <el-drawer
      title="我是标题"
      :visible.sync="showVisible"
      :direction="direction"
      z-index="2000"
    >
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      allData: [
        { index: 1 },
        { index: 2 },
        { index: 3 },
        { index: 4 },
        { index: 5 },
        { index: 6 },
        { index: 7 },
        { index: 8 },
        { index: 9 },
        { index: 10 },
        { index: 11 },
        { index: 12 },
        { index: 13 },
        { index: 14 },
        { index: 15 },
        { index: 16 },
        { index: 17 },
        { index: 18 },
        { index: 19 },
        { index: 20 },
        { index: 21 },
        { index: 22 },
        { index: 23 },
        { index: 24 },
        { index: 25 },
        { index: 26 },
        { index: 27 },
        { index: 28 },
        { index: 29 },
        { index: 30 },
        { index: 31 }
      ],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      showVisible: false,
      direction: 'btt'
    }
  },
  created() {
    this.getData(this.currentPage, this.pageSize)
  },
  methods: {
    handleSizeChange(val) {
      console.log(val)
      this.pageSize = val
      this.currentPage = 1
      this.getData(this.currentPage, this.pageSize)
    },
    handleCurrentChange(page) {
      console.log(page)
      this.currentPage = page
      this.getData(this.currentPage, this.pageSize)
    },
    // 获取表格数据
    getData(page, pageSize) {
      console.log('当前请求的是第几页：' + page)
      setTimeout(() => {
        this.tableData = this.allData.slice((page - 1) * pageSize, page * pageSize)
        this.total = this.allData.length
      }, 1000)
    },
    // 模拟请求删除
    doDelete(index, row) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          const ind = this.allData.map(item => item.index).indexOf(row.index)
          console.log(ind)
          this.allData.splice(ind, 1)
          resolve(true)
        }, 1000)
      })
    },
    handleClick(index, row) {
      this.doDelete(index, row).then(res => {
        if (res) { // 删除成功后重新请求表格数据
          this.getData(this.currentPage, this.pageSize)
        }
      })
    }
  }
}
</script>

问题解决

主要思路就是在删除成功后，前端自己算一下删除后总页码数，如果发现当前页数大于总页码数，就提前给减1，这样就可以解决问题啦，附上代码:

handleClick(index, row) {
  this.doDelete(index, row).then(res => {
    if (res) { // 删除成功后重新请求表格数据
      // 判断当前页码是不是大于总页码
      if (Math.ceil((this.total - 1) / this.pageSize) < this.currentPage) {
        this.currentPage = this.currentPage - 1
      }
      this.getData(this.currentPage, this.pageSize)
    }
  })
}

解决后的效果如下：

总结

虽然只是一些小问题，但是前端开发就是一个要求非常注意细节的工作，不说细节决定成败这种大话，应该说我们应该更有同理心，站在用户角度去使用自己的产品，多关注异常场景，会发现很多测试都发现不了的bug哈哈。