Composed UI

Appearance

分页 Pagination ​

采用分页的形式分隔长列表，每次只加载一个页面

何时使用 ​

  • 当需要进行分页展示时

基本使用 ​

1 2345
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const page = ref(1)
function onChange (page: number, pageSize: number) { // 页码 page 或每页条数 pageSize 改变的回调
  console.log('change page', page)
  console.log('change pageSize', pageSize)
}
</script>
<template>
  <Pagination v-model:page="page" :total="50" @change="onChange" />
</template>

自定义位置 ​

left
center
right
1 2345•••50
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
import type { PaginationProps } from 'composed-ui'
const page = ref(1)
const total = ref(500)
const placementOptions = [
  {
    label: 'left',
    value: 'left'
  },
  {
    label: 'center',
    value: 'center'
  },
  {
    label: 'right',
    value: 'right'
  }
]
const placement = ref<PaginationProps['placement']>('left')
function onChange (page: number, pageSize: number) { // 页码 page 或每页条数 pageSize 改变的回调
  console.log('change page', page)
  console.log('change pageSize', pageSize)
}
</script>
<template>
  <Flex vertical>
    <Radio :options="placementOptions" v-model:value="placement" button button-style="solid" />
    <Pagination v-model:page="page" :total="total" :placement="placement" @change="onChange" />
  </Flex>
</template>

三种尺寸 ​

small
middle
large
1 2345•••50 跳至
页
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
import type { PaginationProps } from 'composed-ui'
const page = ref(1)
const total = ref(500)
const sizeOptions = [
  {
    label: 'small',
    value: 'small'
  },
  {
    label: 'middle',
    value: 'middle'
  },
  {
    label: 'large',
    value: 'large'
  }
]
const size = ref<PaginationProps['size']>('middle')
function onChange (page: number, pageSize: number) { // 页码 page 或每页条数 pageSize 改变的回调
  console.log('change page', page)
  console.log('change pageSize', pageSize)
}
</script>
<template>
  <Flex vertical>
    <Radio :options="sizeOptions" v-model:value="size" button button-style="solid" />
    <Pagination v-model:page="page" :size="size" :total="total" show-quick-jumper @change="onChange" />
  </Flex>
</template>

自定义 pageSize 切换选项 ​

1 2345•••50
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const page = ref(1)
const pageSize = ref(10)
const total = ref(500)
function onChange (page: number, pageSize: number) { // 页码 page 或每页条数 pageSize 改变的回调
  console.log('change page', page)
  console.log('change pageSize', pageSize)
}
function pageSizeChange (page: number, pageSize: number) { // 每页条数 pageSize 变化的回调
  console.log('pageSizeChange page', page)
  console.log('pageSizeChange pageSize', pageSize)
}
</script>
<template>
  <Pagination
    v-model:page="page"
    v-model:page-size="pageSize"
    :total="total"
    :page-size-options="[10, 20, 30, 40, 50]"
    @change="onChange"
    @pageSizeChange="pageSizeChange"
  />
</template>

隐藏 pageSize 切换器 ​

1 2345•••50
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const page = ref(1)
const total = ref(500)
function onChange (page: number, pageSize: number) { // 页码 page 或每页条数 pageSize 改变的回调
  console.log('change page', page)
  console.log('change pageSize', pageSize)
}
</script>
<template>
  <Pagination v-model:page="page" :total="total" :show-size-changer="false" @change="onChange" />
</template>

快速跳转 ​

1 2345•••50 跳至
页
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const page = ref(1)
const total = ref(500)
function onChange (page: number, pageSize: number) { // 页码 page 或每页条数 pageSize 改变的回调
  console.log('change page', page)
  console.log('change pageSize', pageSize)
}
</script>
<template>
  <Pagination v-model:page="page" :total="total" show-quick-jumper @change="onChange" />
</template>

数据总数 ​

共 500 条 1 2345•••50
Total 500 items 1 2345•••50
1-10 of 500 items 1 2345•••50
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const page = ref(1)
const total = ref(500)
function onChange (page: number, pageSize: number) { // 页码 page 或每页条数 pageSize 改变的回调
  console.log('change page', page)
  console.log('change pageSize', pageSize)
}
</script>
<template>
  <Flex vertical>
    <Pagination v-model:page="page" :total="total" show-total @change="onChange" />
    <Pagination
      v-model:page="page"
      :total="total"
      :show-total="(total: number) => `Total ${total} items`"
      @change="onChange"
    />
    <Pagination
      v-model:page="page"
      :total="total"
      :show-total="(total: number, range: number[]) => `${range[0]}-${range[1]} of ${total} items`"
      @change="onChange"
    />
  </Flex>
</template>

禁用 ​

1 2345•••50 跳至
页
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const page = ref(1)
const total = ref(500)
function onChange (page: number, pageSize: number) { // 页码 page 或每页条数 pageSize 改变的回调
  console.log('change page', page)
  console.log('change pageSize', pageSize)
}
</script>
<template>
  <Pagination disabled v-model:page="page" :total="total" show-quick-jumper @change="onChange" />
</template>

APIs ​

Pagination ​

参数说明类型默认值
page
v-model
当前页数number1
pageSize
v-model
每页条数number10
total数据总数number0
disabled是否禁用booleanfalse
pageAmount显示的页码数number5
hideOnSinglePage只有一页时是否隐藏分页booleanfalse
showQuickJumper是否可以快速跳转至某页booleanfalse
jumperProps快速跳转组件 props，参考 Input Propsobject{}
showSizeChanger是否展示 pageSize 切换器，当 total 大于 50 时默认为 truebooleanundefined
changerPropspageSize 切换器组件 props，参考 Select Propsobject{}
pageSizeOptions设置每页可以显示多少条string[] | number[][10, 20, 50 ,100]
showTotal用于显示数据总量和当前数据顺序boolean | ((total: number, range: number[]) => string)false
placement分页展示位置'left' | 'center' | 'right''center'
size分页按钮大小'large' | 'middle' | 'small''large'

Events ​

名称说明类型
change页码 page 或每页条数 pageSize 改变的回调(page: number, pageSize: number) => void
pageSizeChange每页条数 pageSize 变化的回调(page: number, pageSize: number) => void

Released under the MIT License.

Copyright © 2023-present the Composed UI Team