当前位置：首页 > VUE

vue实现分页请求

2026-03-30 02:36:42VUE

Vue 实现分页请求的方法

使用 axios 发送分页请求

在 Vue 中可以通过 axios 发送分页请求，后端接口通常需要传递页码和每页数量参数。

methods: {
  fetchData(page = 1, pageSize = 10) {
    axios.get('/api/data', {
      params: {
        page,
        pageSize
      }
    }).then(response => {
      this.dataList = response.data.list
      this.total = response.data.total
    })
  }
}

使用 Element UI 的分页组件

如果使用 Element UI，可以结合其分页组件实现前端分页展示。

<template>
  <div>
    <el-table :data="dataList">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // axios请求代码
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

实现服务器端分页

对于大数据量情况，建议实现服务器端分页，减少前端数据处理压力。

// 后端接口示例(Node.js)
router.get('/api/data', async (req, res) => {
  const { page = 1, pageSize = 10 } = req.query
  const offset = (page - 1) * pageSize

  const data = await Model.findAndCountAll({
    limit: parseInt(pageSize),
    offset: offset
  })

  res.json({
    list: data.rows,
    total: data.count
  })
})

使用 Vuex 管理分页状态

在大型应用中，可以使用 Vuex 集中管理分页状态。

// store/modules/data.js
const state = {
  dataList: [],
  pagination: {
    page: 1,
    pageSize: 10,
    total: 0
  }
}

const mutations = {
  SET_DATA_LIST(state, payload) {
    state.dataList = payload.list
    state.pagination.total = payload.total
  },
  SET_PAGE(state, page) {
    state.pagination.page = page
  }
}

const actions = {
  async fetchData({ commit, state }) {
    const { page, pageSize } = state.pagination
    const response = await api.getData(page, pageSize)
    commit('SET_DATA_LIST', response.data)
  }
}

防抖优化请求

为防止频繁请求，可以对分页操作添加防抖处理。

vue实现分页请求

import { debounce } from 'lodash'

methods: {
  handleCurrentChange: debounce(function(page) {
    this.currentPage = page
    this.fetchData()
  }, 300)
}