当前位置：首页 > VUE

vue框架实现分页查询

2026-02-25 00:36:58VUE

vue框架实现分页查询

后端API准备

确保后端提供一个支持分页的API接口，通常需要传递page（当前页码）和pageSize（每页条数）参数。例如：

// 示例API请求格式
axios.get('/api/data', {
  params: {
    page: 1,
    pageSize: 10
  }
})

前端数据绑定

在Vue组件中定义分页相关数据：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    listData: []
  }
}

分页请求封装

封装一个获取分页数据的方法：

vue框架实现分页查询

methods: {
  fetchData() {
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        pageSize: this.pageSize
      }
    }).then(res => {
      this.listData = res.data.list
      this.total = res.data.total
    })
  }
}

分页组件使用

使用Element UI或其他UI库的分页组件：

<el-pagination
  @current-change="handlePageChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total"
  layout="total, prev, pager, next">
</el-pagination>

页码变更处理

实现页码变更的事件处理：

vue框架实现分页查询

methods: {
  handlePageChange(val) {
    this.currentPage = val
    this.fetchData()
  }
}

初始加载数据

在mounted钩子中首次加载数据：

mounted() {
  this.fetchData()
}

可选优化项

添加加载状态和错误处理：

data() {
  return {
    loading: false
  }
},
methods: {
  fetchData() {
    this.loading = true
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        pageSize: this.pageSize
      }
    }).then(res => {
      this.listData = res.data.list
      this.total = res.data.total
    }).finally(() => {
      this.loading = false
    })
  }
}