el-pagination 后端接口分页页数从0开始

最新推荐文章于 2023-08-02 17:20:31 发布

公孙元二

最新推荐文章于 2023-08-02 17:20:31 发布

阅读量1.2k

点赞数 1

分类专栏： Css/Canvas/SVG/Elementui 文章标签： vue 前端

本文链接：https://blog.csdn.net/Amnesiac666/article/details/118492393

版权

Css/Canvas/SVG/Elementui 专栏收录该内容

144 篇文章

订阅专栏

这篇博客主要介绍了在前端应用中使用`el-pagination`组件实现分页功能，包括页面大小切换和当前页变更的处理方法。`handleCurrentChange`和`handleSizeChange`函数分别用于更新请求参数并重新获取表格数据。在调用后台接口`dictListAPI`时，注意要将页数减1以适应后台的分页逻辑。博客还展示了如何绑定数据到表格，并展示了响应式加载数据的流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="searchForm.size"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

  data() {
    return {
      searchForm: {
        page: 1,
        size: 10
      },

    // 换页
    handleCurrentChange: function(val) {
      this.searchForm.page = val
      this.getTableData()
    },
    // 每页显示数量
    handleSizeChange: function(val) {
      this.searchForm.size = val
      setTimeout(() => { this.getTableData() }, 0)
    },

    // 获取页面表格
    getTableData: function() {
      const params = Object.assign({}, this.searchForm)
      params.page = params.page - 1  // **给后台的page参数，进行减1**
      API.dictListAPI(params).then(response => {
        const res = response
        if (res.code === '200') {
          this.tableData = res.data.content
          this.total = res.data.total
        } else {
          this.$errorMsg(res.errmsg)
        }
      }).catch(error => {
        this.$errorMsg('' + error)
      })
    }