ETU组件库

Appearance

Return to top
On this page

Pagination 分页

当数据量过多时，使用分页分解数据。

基础用法

设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。 prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper，total和size

5页效果
  • 1
  • 2
  • 3
  • 4
  • 5
100页效果
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 100
<template>
  <div>
    <div>5页效果</div>
    <etu-pagination layout="prev, pager, next" :total="50"/>
  </div>
  <div>
    <div>100页效果</div>
    <etu-pagination layout="prev, pager, next" :total="1000" />
  </div>
</template>

<template>
  <div>
    <div>5页效果</div>
    <etu-pagination layout="prev, pager, next" :total="50"/>
  </div>
  <div>
    <div>100页效果</div>
    <etu-pagination layout="prev, pager, next" :total="1000" />
  </div>
</template>

当只有一页时隐藏分页

当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页

  • 1 
<template>
  <div>
    <etu-switch v-model="value" />
    <etu-pagination
      :hide-on-single-page="value"
      :total="5"
      layout="prev, pager, next"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const value = ref(false);
</script>

<template>
  <div>
    <etu-switch v-model="value" />
    <etu-pagination
      :hide-on-single-page="value"
      :total="5"
      layout="prev, pager, next"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const value = ref(false);
</script>

附加功能

根据场景需要，可以添加其他功能模块。

此示例是一个完整的用例。 使用了 size-change 和 current-change 事件来处理页码大小和当前页变动时候触发的事件。 page-sizes接受一个整数类型的数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400] 表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。

总数
总计1000条
  • 1
  • 3
  • 4
  • 5
  • 6
  • 7
  • 10
修改pageSize
  • 1
  • 3
  • 4
  • 5
  • 6
  • 7
  • 10
跳转
  • 1
  • 3
  • 4
  • 5
  • 6
  • 7
  • 10
跳转至
总体
总计400条
  • 1
  • 2
  • 3
  • 4
跳转至
<template>
  <div>
    <div>总数</div>
    <etu-pagination
      v-model:current-page="currentPage1"
      :page-size="100"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div>
    <div>修改pageSize</div>
    <etu-pagination
      v-model:current-page="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div>
    <div>跳转</div>
    <etu-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div>
    <div>总体</div>
    <etu-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const currentPage1 = ref(5);
const currentPage2 = ref(5);
const currentPage3 = ref(5);
const currentPage4 = ref(4);
const pageSize2 = ref(100);
const pageSize3 = ref(100);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<template>
  <div>
    <div>总数</div>
    <etu-pagination
      v-model:current-page="currentPage1"
      :page-size="100"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div>
    <div>修改pageSize</div>
    <etu-pagination
      v-model:current-page="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div>
    <div>跳转</div>
    <etu-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div>
    <div>总体</div>
    <etu-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const currentPage1 = ref(5);
const currentPage2 = ref(5);
const currentPage3 = ref(5);
const currentPage4 = ref(4);
const pageSize2 = ref(100);
const pageSize3 = ref(100);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

Pagination属性

属性名说明类型默认值
page-size / v-model:page-size每页显示条目个数number10
default-page-size每页显示条目数的初始值number-
total总条目数number—
page-count总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性number—
pager-count设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠number7
current-page / v-model:current-page当前页数number1
default-current-page当前页数的初始值number-
layout组件布局，子组件名用逗号分隔stringprev, pager, next, jumper, ->, total
page-sizes每页显示个数选择器的选项设置array[10, 20, 30, 40, 50, 100]
popper-class每页显示个数选择器的下拉框类名string—
prev-text替代图标显示的上一页文字string—
next-text替代图标显示的下一页文字string—
disabled是否禁用分页booleanfalse
hide-on-single-page只有一页时是否隐藏boolean-

Pagination事件

事件名说明类型
size-changepage-size 改变时触发Function
current-changecurrent-page 改变时触发Function
prev-click用户点击上一页按钮改变当前页时触发Function
next-click用户点击下一页按钮改变当前页时触发Function

Pagination插槽

名称说明
default自定义内容 设置文案，需要在 layout 中列出 slot