当前位置：首页 > 前端教程

elementui pagination

2026-03-06 01:16:55前端教程

ElementUI Pagination 基础用法

ElementUI 的分页组件 el-pagination 提供多种分页样式和功能，适用于数据表格或其他需要分页的场景。以下为基本实现方式：

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="handleCurrentChange"
    layout="prev, pager, next">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      // 此处可触发数据加载逻辑
    }
  }
};
</script>

常用属性配置

current-page: 当前页码，需通过 .sync 修饰符或手动更新
page-size: 每页显示条目数
total: 总数据条目数
page-sizes: 可选的每页显示数量数组，如 [10, 20, 50]
layout: 组件布局选项，支持组合 sizes, prev, pager, next, jumper, total, slot

完整布局示例：

<el-pagination
  :page-sizes="[10, 20, 50, 100]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="400">
</el-pagination>

事件处理

size-change: 当 page-size 改变时触发
current-change: 当 current-page 改变时触发
prev-click: 点击上一页按钮时触发
next-click: 点击下一页按钮时触发

事件处理示例：

methods: {
  handleSizeChange(val) {
    this.pageSize = val;
    this.loadData();
  },
  handleCurrentChange(val) {
    this.currentPage = val;
    this.loadData();
  },
  loadData() {
    // 调用API获取数据
  }
}

小型分页

添加 small 属性可显示紧凑样式：

elementui pagination

<el-pagination
  small
  :total="50">
</el-pagination>

背景色分页

设置 background 属性可添加背景色：

<el-pagination
  background
  :total="100">
</el-pagination>

禁用状态

通过 disabled 属性控制禁用状态：

elementui pagination

<el-pagination
  disabled
  :total="100">
</el-pagination>

自定义页码按钮

使用 pager-count 属性设置最大页码按钮数（奇数，5-21之间）：

<el-pagination
  :pager-count="7"
  :total="100">
</el-pagination>

国际化配置

通过设置 i18n 属性或全局配置实现多语言：

// 全局配置
Vue.prototype.$ELEMENT = { i18n: (key, value) => i18n.t(key, value) };

// 组件配置
<el-pagination
  :total="100"
  :current-page="1"
  :i18n="{ prevText: '前一页', nextText: '后一页' }">
</el-pagination>

与表格联动示例

典型的分页表格实现：

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

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟API调用
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = mockData.slice(start, end);
      this.total = mockData.length;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    }
  }
};
</script>