当前位置：首页 > VUE

vue实现接口分页

2026-02-18 00:30:27VUE

实现接口分页的基本思路

在Vue中实现接口分页通常需要结合后端API和前端组件。后端提供分页数据接口，前端通过Vue组件展示分页数据并处理用户的分页操作。

后端API设计

后端API需要支持分页参数，通常包括当前页码和每页数据量。常见的参数名是page和pageSize。

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

前端分页组件

使用第三方分页组件如el-pagination（Element UI）或自行实现分页控件。

<el-pagination
  @current-change="handlePageChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="totalItems">
</el-pagination>

数据获取与更新

在Vue组件中定义分页相关数据和方法。

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0,
    listData: []
  }
},
methods: {
  fetchData() {
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        pageSize: this.pageSize
      }
    }).then(response => {
      this.listData = response.data.items
      this.totalItems = response.data.total
    })
  },
  handlePageChange(page) {
    this.currentPage = page
    this.fetchData()
  }
},
created() {
  this.fetchData()
}

完整组件示例

<template>
  <div>
    <table>
      <tr v-for="item in listData" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      listData: []
    }
  },
  methods: {
    fetchData() {
      axios.get('/api/data', {
        params: {
          page: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(response => {
        this.listData = response.data.items
        this.totalItems = response.data.total
      })
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

优化考虑

实现防抖处理，避免快速翻页时频繁请求。可以添加加载状态提示，提升用户体验。对于大型数据集，考虑实现虚拟滚动代替传统分页。

错误处理

在请求失败时添加错误处理逻辑，显示友好提示并可能重试机制。

vue实现接口分页

fetchData() {
  this.loading = true
  axios.get('/api/data', {
    params: {
      page: this.currentPage,
      pageSize: this.pageSize
    }
  }).then(response => {
    this.listData = response.data.items
    this.totalItems = response.data.total
  }).catch(error => {
    this.$message.error('数据加载失败')
  }).finally(() => {
    this.loading = false
  })
}