# ByPager 分页组件

基于 Element UI Pagination 的高级分页组件，提供数据分页显示、页码跳转、每页条数选择等功能。

注意：本组件基于 Element UI Pagination 实现，支持 Element UI Pagination 的所有功能。如需了解更多高级配置和功能，请参考 Element UI Pagination 官方文档 (opens new window)。

# 基础用法

# 高级功能

# 1. 小型分页

适用于空间较小的场景，提供紧凑的分页样式。

特性：

紧凑的分页按钮样式
适合在空间有限的场景使用
保持所有分页功能

# 2. 完整功能分页

包含所有分页功能的完整版本，提供最佳的用户体验。

特性：

显示总条目数
每页条数选择器
页码导航按钮
页码跳转输入框
支持自定义布局

# 3. 带背景色分页

为分页按钮添加背景色，提升视觉效果。

特性：

为分页按钮添加背景色
当前页高亮显示
提升视觉层次感

# 4. 自定义布局

支持自定义分页组件的布局，灵活配置显示内容。

特性：

支持多种布局组合
使用 -> 实现右对齐
灵活配置显示组件

# 5. 禁用状态

支持禁用分页组件，适用于数据加载中或权限不足的场景。

特性：

支持整体禁用
适用于数据加载状态
防止用户误操作

# 6. 单页隐藏

当只有一页数据时，可以隐藏分页组件。

特性：

单页时自动隐藏
避免不必要的UI元素
提升用户体验

# 7. 自定义文本

特性：

支持中英文切换
替代默认图标显示
提升国际化支持

# API

# Props

参数	说明	类型	可选值	默认值
total	总条目数	number	—	0
page-size	每页显示条目个数	number	—	10
current-page	当前页数	number	—	1
page-count	总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能	number	—	—
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	7
small	是否使用小型分页样式	boolean	—	false
background	是否为分页按钮添加背景色	boolean	—	false
layout	组件布局，子组件名用逗号分隔	string	`sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot`	'prev, pager, next, jumper, ->, total'
page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 50, 100]
popper-class	每页显示个数选择器的下拉框类名	string	—	—
prev-text	替代图标显示的上一页文字	string	—	—
next-text	替代图标显示的下一页文字	string	—	—
disabled	是否禁用	boolean	—	false
hide-on-single-page	只有一页时是否隐藏	boolean	—	—

# Events

事件名	说明	参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

# Methods

方法名	说明	参数
-	-	-

# 完整示例

# 结合表格使用的完整示例

<template>
  <div>
    <!-- 表格 -->
    <by-table :columns="columns" :data="tableData" :loading="loading" />

    <!-- 分页 -->
    <div style="margin-top: 20px; text-align: right;">
      <by-pager
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      columns: [
        { label: 'ID', prop: 'id' },
        { label: '姓名', prop: 'name' },
        { label: '邮箱', prop: 'email' },
        { label: '创建时间', prop: 'createTime' }
      ],
      tableData: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 分页改变
    handleCurrentChange(page) {
      this.currentPage = page
      this.loadData()
    },
    // 每页条数改变
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.loadData()
    },
    // 加载数据
    async loadData() {
      this.loading = true
      try {
        const { data } = await this.$http.get('/api/users', {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize
          }
        })
        this.tableData = data.list
        this.total = data.total
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

# 前端分页示例

<template>
  <div>
    <by-table :columns="columns" :data="currentData" />
    <by-pager
      :total="allData.length"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      allData: [], // 所有数据
      currentData: [], // 当前页数据
      columns: [
        { label: 'ID', prop: 'id' },
        { label: '姓名', prop: 'name' }
      ]
    }
  },
  mounted() {
    this.loadAllData()
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page
      this.updateCurrentData()
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.updateCurrentData()
    },
    async loadAllData() {
      // 加载所有数据
      const { data } = await this.$http.get('/api/users/all')
      this.allData = data
      this.updateCurrentData()
    },
    updateCurrentData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      this.currentData = this.allData.slice(start, end)
    }
  }
}
</script>

# 样式类

类名	说明
.by-pager	分页组件根容器
.by-pager--small	小型分页样式
.by-pager--background	带背景色分页样式
.by-pager--disabled	禁用状态样式

# 注意事项

总条目数计算：total 属性用于计算总页数，确保传入正确的总条目数
页码范围：pager-count 必须为大于等于 5 且小于等于 21 的奇数
布局配置：layout 属性支持多种组合，使用逗号分隔各个组件
事件处理：分页改变时会触发相应事件，需要正确处理数据加载逻辑
禁用状态：在数据加载过程中建议设置 disabled 属性防止误操作
单页隐藏：当数据量较小时，可以使用 hide-on-single-page 隐藏分页组件
自定义文本：prev-text 和 next-text 可以替代默认的图标显示
响应式设计：分页组件支持响应式布局，在不同屏幕尺寸下自动适配

← ByTable 表格组件 ByPageSearch 页面搜索组件 →