当前位置：首页 > VUE

vue实现table加分页

2026-01-20 15:29:51VUE

Vue 实现表格分页

在 Vue 中实现表格分页功能，通常需要结合数据分页逻辑和前端表格渲染。以下是实现步骤：

安装依赖（如使用第三方库）

若使用 Element UI 或 Ant Design Vue 等组件库，需先安装：

npm install element-ui  # Element UI
npm install ant-design-vue  # Ant Design Vue

基础实现（纯 Vue）

数据准备 定义表格数据和分页参数：

data() {
  return {
    tableData: [],       // 全部数据
    currentPage: 1,      // 当前页码
    pageSize: 10,        // 每页条数
    paginatedData: []    // 当前页数据
  };
}

分页计算 使用计算属性或方法过滤当前页数据：

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.tableData.slice(start, end);
  }
}

渲染表格 在模板中渲染分页数据：

<table>
  <tr v-for="(item, index) in paginatedData" :key="index">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
  </tr>
</table>

分页控件 添加分页按钮或使用组件库的分页器：

<div>
  <button @click="currentPage--" :disabled="currentPage === 1">上一页</button>
  <span>第 {{ currentPage }} 页</span>
  <button @click="currentPage++" :disabled="currentPage * pageSize >= tableData.length">下一页</button>
</div>

使用 Element UI 实现

引入组件

import { ElTable, ElPagination } from 'element-ui';

模板结构

<el-table :data="paginatedData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

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

分页逻辑

methods: {
  handlePageChange(page) {
    this.currentPage = page;
  }
}

使用 Ant Design Vue 实现

引入组件

import { Table, Pagination } from 'ant-design-vue';

模板结构

<a-table :columns="columns" :data-source="paginatedData" rowKey="id">
</a-table>

<a-pagination
  @change="handlePageChange"
  :current="currentPage"
  :pageSize="pageSize"
  :total="tableData.length"
/>

分页逻辑

methods: {
  handlePageChange(page) {
    this.currentPage = page;
  }
}

后端分页（API 请求）

若数据量较大，需通过 API 分页请求：

methods: {
  async fetchData(page = 1) {
    const res = await axios.get('/api/data', {
      params: { page, size: this.pageSize }
    });
    this.tableData = res.data.list;
    this.total = res.data.total;
  }
}