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

elementui page

2026-03-06 05:23:32前端教程

以下是关于 Element UI 分页组件（Pagination）的详细使用指南和常见功能说明：

基础用法

在 Vue 项目中安装 Element UI 后，通过 <el-pagination> 标签即可使用基础分页功能。默认显示页码按钮和上下页导航：

<el-pagination
  :total="100"
  :page-size="10"
  :current-page="1">
</el-pagination>

属性配置

total：总数据量（必填）
page-size：每页显示条目数（默认10）
current-page：当前页码（默认1）
page-sizes：可选的每页显示条目数数组（如[10, 20, 30]）
layout：组件布局选项（默认"prev, pager, next"）

完整功能示例

带每页条数选择器和快速跳转的完整布局：

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

事件处理

size-change：每页条数变化时触发
current-change：当前页变化时触发

对应方法示例：

methods: {
  handleSizeChange(val) {
    this.pageSize = val;
    this.fetchData();
  },
  handleCurrentChange(val) {
    this.currentPage = val;
    this.fetchData();
  }
}

样式定制

可通过 CSS 覆盖默认样式：

.el-pagination {
  margin-top: 20px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #409EFF;
}

注意事项

需要配合 v-model 或事件处理实现数据绑定
小型分页可使用 small 属性
当总页数超过7时会自动折叠中间页码
服务端分页需自行处理数据请求逻辑

与其他组件集成

典型场景是与表格组件配合使用：

<el-table :data="tableData">
  <!-- 表格列定义 -->
</el-table>
<el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :total="total"
  layout="prev, pager, next">
</el-pagination>

elementui page