为什么实现分页功能后，前端表格不会根据分页选择条数而更新？

Question

UI：

 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="goodsInfo.pagenum"
        :page-sizes="[10, 20, 30, 40]" :page-size="goodsInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="this.total">
      </el-pagination>

data:

 goodsInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      total: 0

methods:

handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.goodsInfo.pagesize = val
      this.getCateList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.goodsInfo.pagenum = val
      this.getCateList()
    }

点击每页十条，表格还是渲染出所有数据

Answer 1

你请求的是全部数据，下面的组件是分页。
不同于有些表格组件带自动分页的功能，所以这个分页要自己实现。
下面是两种方法：
1.需要在接口里传当前分页的参数给服务器，后端返回对应分页大小和页数的数据。
2.处理你获取到的数据，根据页数和分页大小过滤数据。

Answer 2

getCateList() {
  axios.get('/api/categories', {
    params: {
      pagenum: this.goodsInfo.pagenum,
      pagesize: this.goodsInfo.pagesize,
    },
  })
  .then(response => {
    this.tableData = response.data; // 更新表格数据
  })
  .catch(error => {
    console.error(error);
  });
}

Answer 3

排查下接口的问题，看下入参和接口分页返回，可能是接口的问题呢