el-pagination详解

el-pagination 是 Element Plus 框架中的一个分页组件，用于实现分页导航。它提供了多种配置选项，以便根据需求定制分页的样式和行为。

一。 属性详解

1. small:

   • 用途: 是否使用小尺寸的分页。
   • 默认值: false

2. background:

   • 用途: 是否使用带有背景色的按钮。
   • 默认值: false

3. total:

   • 用途: 数据总条数。

4. page-size:

   • 用途: 每页显示条目个数。
   • 默认值: 10

5. page-sizes:

   • 用途: 每页显示条目的可选数量。
   • 默认值: [10, 20, 30, 40, 50, 100]

6. layout:

   • 用途: 组件布局，子组件名用逗号分隔。
   • 默认值: prev, pager, next, jumper, ->, total, sizes

7. pager-count:

   • 用途: 页码按钮的数量，当总页数超过该值时会折叠。
   • 默认值: 7

8. current-page:

   • 用途: 当前页数。
   • 默认值: 1

9. disabled:

   • 用途: 是否禁用分页组件。
   • 默认值: false

10. hide-on-single-page:

    • 用途: 只有一页时是否隐藏分页组件。
    • 默认值: false

11. popper-class:

    • 用途: 自定义下拉菜单的类名。

12. prev-text:

    • 用途: 自定义上一页按钮的文字。

13. next-text:

    • 用途: 自定义下一页按钮的文字。

14. teleported:

    • 用途: 是否将下拉菜单插入到 body 节点下。
    • 默认值: true

二。 事件详解

1. on-current-change:

   • 用途: 当前页数发生变化时触发的回调函数。
   • 参数: currentPage（当前页数）

2. on-size-change:

   • 用途: 每页显示条目数量发生变化时触发的回调函数。
   • 参数: pageSize（每页显示条目数量）

三。 插槽详解

1. prev:

   • 插槽名称: prev
   • 用途: 自定义上一页按钮的内容。

2. next:

   • 插槽名称: next
   • 用途: 自定义下一页按钮的内容。

3. total:

   • 插槽名称: total
   • 用途: 自定义总条数显示的内容。

4. sizes:

   • 插槽名称: sizes
   • 用途: 自定义每页显示条目数量选择器的内容。

四。实例

<template>
  <div>
    <h2>Pagination 示例</h2>

    <!-- 基本用法 -->
    <el-pagination
      :total="100"
      :page-size="10"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 小尺寸分页 -->
    <el-pagination
      small
      :total="100"
      :page-size="10"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 带背景色的按钮 -->
    <el-pagination
      background
      :total="100"
      :page-size="10"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 自定义每页显示条目数量 -->
    <el-pagination
      :total="100"
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="sizes, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 自定义组件布局 -->
    <el-pagination
      :total="100"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 自定义页码按钮数量 -->
    <el-pagination
      :total="100"
      :page-size="10"
      :pager-count="5"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 禁用分页组件 -->
    <el-pagination
      disabled
      :total="100"
      :page-size="10"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 只有一页时隐藏分页组件 -->
    <el-pagination
      :total="10"
      :page-size="10"
      layout="prev, pager, next"
      hide-on-single-page
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 自定义下拉菜单的类名 -->
    <el-pagination
      :total="100"
      :page-size="10"
      layout="sizes, prev, pager, next"
      popper-class="custom-popper-class"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 自定义上一页和下一页按钮的文字 -->
    <el-pagination
      :total="100"
      :page-size="10"
      layout="prev, pager, next"
      prev-text="上一页"
      next-text="下一页"
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 将下拉菜单插入到 body 节点下 -->
    <el-pagination
      :total="100"
      :page-size="10"
      layout="sizes, prev, pager, next"
      teleported
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination-container"
    ></el-pagination>

    <!-- 使用插槽自定义内容 -->
    <el-pagination
      :total="100"
      :page-size="10"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      class="pagination-container"
    >
      <template #prev>
        <span>上一页</span>
      </template>
      <template #next>
        <span>下一页</span>
      </template>
      <template #total>
        <span>共 {{ total }} 条记录</span>
      </template>
      <template #sizes>
        <el-select v-model="pageSize" @change="handleSizeChange">
          <el-option value="10" label="10 条/页"></el-option>
          <el-option value="20" label="20 条/页"></el-option>
          <el-option value="30" label="30 条/页"></el-option>
          <el-option value="40" label="40 条/页"></el-option>
        </el-select>
      </template>
    </el-pagination>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const currentPage = ref(1)
const pageSize = ref(10)
const total = 100

const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`)
  currentPage.value = val
}

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`)
  pageSize.value = parseInt(val)
}
</script>

<style scoped>
.pagination-container {
  margin: 20px 0;
}

.custom-popper-class {
  background-color: rgba(255, 0, 0, 0.5);
}
</style>