当前位置：首页 > VUE

Vue分页功能实现步骤

2026-02-23 10:34:35VUE

分页功能实现步骤

安装依赖（如使用第三方库）
如需使用element-ui或ant-design-vue等UI库的分页组件，需先安装对应库。例如：

npm install element-plus

后端API准备
确保后端接口支持分页参数（如page和pageSize），返回数据格式包含当前页数据及总条数。例如：

{
  "data": [],
  "total": 100
}

前端组件引入
在Vue文件中引入分页组件（以element-plus为例）：

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

数据绑定与逻辑处理
定义分页相关变量和方法，调用API获取数据：

import { ref, onMounted } from 'vue';
import { fetchData } from '@/api';

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const listData = ref([]);

const loadData = async () => {
  const res = await fetchData({
    page: currentPage.value,
    pageSize: pageSize.value
  });
  listData.value = res.data;
  total.value = res.total;
};

const handlePageChange = () => {
  loadData();
};

onMounted(() => {
  loadData();
});

样式与布局调整
根据需求调整分页组件位置和样式，例如居中显示：

.el-pagination {
  justify-content: center;
  margin-top: 20px;
}

自定义分页逻辑（可选）
若需手动实现分页，可对数组进行切片处理：

const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return listData.value.slice(start, start + pageSize.value);
});

Vue分页功能实现步骤