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

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()
    }

image.png 点击每页十条,表格还是渲染出所有数据

阅读 1.8k
3 个回答

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

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);
  });
}

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

推荐问题
宣传栏