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

2023-06-27 285 0

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 点击每页十条,表格还是渲染出所有数据

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

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.处理你获取到的数据,根据页数和分页大小过滤数据。

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?