当前位置：首页 > VUE

vue结合后台实现分页

2026-02-23 07:01:43VUE

Vue 结合后台实现分页

后端接口设计

后端需要提供支持分页的接口，通常包含以下参数：

page: 当前页码
pageSize: 每页显示数量
返回数据应包含分页信息，如总条数(total)、当前页数据(list)

示例接口响应格式：

{
  "code": 200,
  "data": {
    "total": 100,
    "list": [
      { "id": 1, "name": "Item 1" },
      { "id": 2, "name": "Item 2" }
    ]
  }
}

前端实现步骤

安装依赖

npm install axios

封装API请求

// api.js
import axios from 'axios'

export const getPageData = (params) => {
  return axios.get('/api/data', { params })
}

Vue组件实现

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

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-size="pagination.size"
      :total="pagination.total">
    </el-pagination>
  </div>
</template>

<script>
import { getPageData } from './api'

export default {
  data() {
    return {
      tableData: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const { current, size } = this.pagination
      getPageData({ page: current, pageSize: size })
        .then(res => {
          this.tableData = res.data.list
          this.pagination.total = res.data.total
        })
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.fetchData()
    }
  }
}
</script>

关键点说明

分页组件绑定 使用Element UI的el-pagination组件，绑定当前页码、每页大小和总条数，监听页码变化事件。

数据请求时机 在created钩子中初始化数据，页码变化时重新请求数据。

参数传递 将当前页码和每页大小作为参数传递给后端接口。

优化建议

添加加载状态

<template>
  <el-pagination :disabled="loading" ... />
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      getPageData(...)
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

保存分页设置 将分页参数保存到vuex或localStorage，保持用户操作习惯。

错误处理 添加接口请求失败的处理逻辑，显示错误提示。

vue结合后台实现分页