当前位置：首页 > VUE

Vue和elementui实现分页

2026-02-22 06:51:03VUE

Vue 与 Element UI 实现分页的方法

在 Vue 项目中结合 Element UI 实现分页功能，可以通过以下步骤完成。Element UI 提供了 <el-pagination> 组件，能够快速集成分页功能。

安装 Element UI

确保项目中已安装 Element UI。若未安装，可以通过以下命令安装：

Vue和elementui实现分页

npm install element-ui

在 main.js 中引入 Element UI：

Vue和elementui实现分页

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

分页组件的基本使用

在 Vue 组件中，使用 <el-pagination> 组件实现分页。以下是一个完整示例：

<template>
  <div>
    <el-table :data="currentTableData" style="width: 100%">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 原始数据
      currentTableData: [], // 当前页显示的数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0, // 总数据量
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟数据请求
      this.tableData = [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        // 更多数据...
      ];
      this.total = this.tableData.length;
      this.updateCurrentTableData();
    },
    updateCurrentTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentTableData = this.tableData.slice(start, end);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.updateCurrentTableData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updateCurrentTableData();
    },
  },
};
</script>

关键点说明

current-page：绑定当前页码，初始值为 1。
page-size：绑定每页显示的数据条数，初始值为 10。
total：绑定总数据量，用于计算总页数。
page-sizes：设置每页显示条数的可选值。
layout：定义分页组件的布局，包含分页按钮、跳转输入框等。
@size-change：每页显示条数变化时触发的事件。
@current-change：当前页码变化时触发的事件。

分页逻辑

通过 slice 方法从原始数据中截取当前页的数据。
在 handleSizeChange 和 handleCurrentChange 方法中更新 currentTableData。

后端分页

如果数据量较大，通常需要后端分页。以下是一个结合后端 API 的示例：

methods: {
  fetchData() {
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        size: this.pageSize,
      },
    }).then(response => {
      this.currentTableData = response.data.list;
      this.total = response.data.total;
    });
  },
  handleSizeChange(val) {
    this.pageSize = val;
    this.fetchData();
  },
  handleCurrentChange(val) {
    this.currentPage = val;
    this.fetchData();
  },
}