ChuFix UI v0.11.0
开发预览 更新于 2026-05-10

Pagination 分页

数字按钮 + 上下页 + 跳转输入框，自动计算页码省略号，3 档尺寸。

基础用法

传 total（总条数）和 pageSize（每页条数），组件自动算页数。v-model (Vue) / value + onChange (React) 绑定当前页（1-based）。

背景 视口
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfPagination } from '@chufix-design/vue';

const page = ref(1);
</script>
<template>
  <CfPagination v-model="page" :total="80" :page-size="10" />
</template>
<script setup>
import { ref } from 'vue';
import { CfPagination } from '@chufix-design/vue';

const page = ref(1);
</script>
<template>
  <CfPagination v-model="page" :total="80" :page-size="10" />
</template>
import { useState } from 'react';
import { CfPagination } from '@chufix-design/react';

export default function Demo() {
  const [page, setPage] = useState(1);
  const [page, setPage] = useState(1);
  return (
    <>
      <CfPagination value={page} onChange={setPage} total={80} pageSize={10} />
    </>
  );
}
import { useState } from 'react';
import { CfPagination } from '@chufix-design/react';

export default function Demo() {
  const [page, setPage] = useState(1);
  const [page, setPage] = useState(1);
  return (
    <>
      <CfPagination value={page} onChange={setPage} total={80} pageSize={10} />
    </>
  );
}

显示总数 / 跳转输入

showTotal 在左侧加「共 N 条」文案；showJumper 在右侧加「跳至 N 页」输入框（按 Enter 或离焦提交）。两个开关相互独立。

背景 视口
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfPagination } from '@chufix-design/vue';

const page = ref(5);
</script>
<template>
  <CfPagination
    v-model="page"
    :total="200"
    :page-size="10"
    show-total
    show-jumper
  />
</template>
<script setup>
import { ref } from 'vue';
import { CfPagination } from '@chufix-design/vue';

const page = ref(5);
</script>
<template>
  <CfPagination
    v-model="page"
    :total="200"
    :page-size="10"
    show-total
    show-jumper
  />
</template>
import { useState } from 'react';
import { CfPagination } from '@chufix-design/react';

export default function Demo() {
  const [page, setPage] = useState(5);
  const [page, setPage] = useState(5);
  return (
    <>
      <CfPagination
      value={page}
      onChange={setPage}
      total={200}
      pageSize={10}
      showTotal
      showJumper
      />
    </>
  );
}
import { useState } from 'react';
import { CfPagination } from '@chufix-design/react';

export default function Demo() {
  const [page, setPage] = useState(5);
  const [page, setPage] = useState(5);
  return (
    <>
      <CfPagination
      value={page}
      onChange={setPage}
      total={200}
      pageSize={10}
      showTotal
      showJumper
      />
    </>
  );
}

邻接页码数量

siblingCount 控制当前页两侧显示几个相邻页码 — 默认 1。结合首尾页一起最多渲染 siblingCount * 2 + 5 个按钮，超出会插入省略号 …。

背景 视口
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfPagination } from '@chufix-design/vue';

const a = ref(7);
const b = ref(7);
const c = ref(7);
</script>
<template>
  <div class="demo-stack">
    <div>
      <CfPagination v-model="a" :total="500" :page-size="10" :sibling-count="0" />
    </div>
    <div>
      <CfPagination v-model="b" :total="500" :page-size="10" :sibling-count="1" />
    </div>
    <div>
      <CfPagination v-model="c" :total="500" :page-size="10" :sibling-count="2" />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfPagination } from '@chufix-design/vue';

const a = ref(7);
const b = ref(7);
const c = ref(7);
</script>
<template>
  <div class="demo-stack">
    <div>
      <CfPagination v-model="a" :total="500" :page-size="10" :sibling-count="0" />
    </div>
    <div>
      <CfPagination v-model="b" :total="500" :page-size="10" :sibling-count="1" />
    </div>
    <div>
      <CfPagination v-model="c" :total="500" :page-size="10" :sibling-count="2" />
    </div>
  </div>
</template>
import { useState } from 'react';
import { CfPagination } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(7);
  const [a, setA] = useState(7);
  const [b, setB] = useState(7);
  const [b, setB] = useState(7);
  const [c, setC] = useState(7);
  const [c, setC] = useState(7);
  return (
    <>
      <CfPagination value={a} onChange={setA} total={500} pageSize={10} siblingCount={0} />
      <CfPagination value={b} onChange={setB} total={500} pageSize={10} siblingCount={1} />
      <CfPagination value={c} onChange={setC} total={500} pageSize={10} siblingCount={2} />
    </>
  );
}
import { useState } from 'react';
import { CfPagination } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(7);
  const [a, setA] = useState(7);
  const [b, setB] = useState(7);
  const [b, setB] = useState(7);
  const [c, setC] = useState(7);
  const [c, setC] = useState(7);
  return (
    <>
      <CfPagination value={a} onChange={setA} total={500} pageSize={10} siblingCount={0} />
      <CfPagination value={b} onChange={setB} total={500} pageSize={10} siblingCount={1} />
      <CfPagination value={c} onChange={setC} total={500} pageSize={10} siblingCount={2} />
    </>
  );
}

三档尺寸

size 与 Button / Input 保持一致 — sm 紧凑（表格内分页常用）/ md 默认 / lg 大号。

背景 视口
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfPagination } from '@chufix-design/vue';

const a = ref(3);
const b = ref(3);
const c = ref(3);
</script>
<template>
  <div class="demo-stack">
    <CfPagination v-model="a" :total="120" :page-size="10" size="sm" />
    <CfPagination v-model="b" :total="120" :page-size="10" size="md" />
    <CfPagination v-model="c" :total="120" :page-size="10" size="lg" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfPagination } from '@chufix-design/vue';

const a = ref(3);
const b = ref(3);
const c = ref(3);
</script>
<template>
  <div class="demo-stack">
    <CfPagination v-model="a" :total="120" :page-size="10" size="sm" />
    <CfPagination v-model="b" :total="120" :page-size="10" size="md" />
    <CfPagination v-model="c" :total="120" :page-size="10" size="lg" />
  </div>
</template>
import { useState } from 'react';
import { CfPagination } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(3);
  const [a, setA] = useState(3);
  const [b, setB] = useState(3);
  const [b, setB] = useState(3);
  const [c, setC] = useState(3);
  const [c, setC] = useState(3);
  return (
    <>
      <CfPagination value={a} onChange={setA} total={120} pageSize={10} size="sm" />
      <CfPagination value={b} onChange={setB} total={120} pageSize={10} size="md" />
      <CfPagination value={c} onChange={setC} total={120} pageSize={10} size="lg" />
    </>
  );
}
import { useState } from 'react';
import { CfPagination } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(3);
  const [a, setA] = useState(3);
  const [b, setB] = useState(3);
  const [b, setB] = useState(3);
  const [c, setC] = useState(3);
  const [c, setC] = useState(3);
  return (
    <>
      <CfPagination value={a} onChange={setA} total={120} pageSize={10} size="sm" />
      <CfPagination value={b} onChange={setB} total={120} pageSize={10} size="md" />
      <CfPagination value={c} onChange={setC} total={120} pageSize={10} size="lg" />
    </>
  );
}

与外部 pageSize 选择器配合

Pagination 自身不内置 “每页条数” 选择器，但与一个外部 Select 组合就能得到完整的列表分页栏。 切换 pageSize 时通常需要重置到第 1 页，避免 page 越界。

背景 视口
1-10 / 243
src/App.vue 
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { CfPagination, CfSelect } from '@chufix-design/vue';

const page = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(243);

const pageOptions = [
  { label: '10 / 页', value: 10 },
  { label: '20 / 页', value: 20 },
  { label: '50 / 页', value: 50 },
];

const summary = computed<string>(() => {
  const start = (page.value - 1) * pageSize.value + 1;
  const end = Math.min(page.value * pageSize.value, total.value);
  return `${start}-${end} / ${total.value}`;
});

watch(pageSize, () => {
  page.value = 1;
});
</script>
<template>
  <div class="demo-row">
    <CfSelect v-model="pageSize" :options="pageOptions" size="sm" />
    <CfPagination v-model="page" :total="total" :page-size="pageSize" size="sm" />
    <span class="adm-summary">{{ summary }}</span>
  </div>
</template>
<style scoped>
.adm-summary { color: var(--fg-3); font-size: var(--t-12); }
</style>
<script setup>
import { computed, ref, watch } from 'vue';
import { CfPagination, CfSelect } from '@chufix-design/vue';

const page = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(243);

const pageOptions = [
  { label: '10 / 页', value: 10 },
  { label: '20 / 页', value: 20 },
  { label: '50 / 页', value: 50 },
];

const summary = computed<string>(() => {
  const start = (page.value - 1) * pageSize.value + 1;
  const end = Math.min(page.value * pageSize.value, total.value);
  return `${start}-${end} / ${total.value}`;
});

watch(pageSize, () => {
  page.value = 1;
});
</script>
<template>
  <div class="demo-row">
    <CfSelect v-model="pageSize" :options="pageOptions" size="sm" />
    <CfPagination v-model="page" :total="total" :page-size="pageSize" size="sm" />
    <span class="adm-summary">{{ summary }}</span>
  </div>
</template>
<style scoped>
.adm-summary { color: var(--fg-3); font-size: var(--t-12); }
</style>
import { useEffect, useState } from 'react';
import { CfPagination, CfSelect } from '@chufix-design/react';

export default function Demo() {
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
useEffect(() => { setPage(1); }, [pageSize]);

return (
  <>
    <CfSelect value={pageSize} onChange={setPageSize} options={pageOptions} size="sm" />
    <CfPagination value={page} onChange={setPage} total={243} pageSize={pageSize} size="sm" />
  </>
);
}
import { useEffect, useState } from 'react';
import { CfPagination, CfSelect } from '@chufix-design/react';

export default function Demo() {
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
useEffect(() => { setPage(1); }, [pageSize]);

return (
  <>
    <CfSelect value={pageSize} onChange={setPageSize} options={pageOptions} size="sm" />
    <CfPagination value={page} onChange={setPage} total={243} pageSize={pageSize} size="sm" />
  </>
);
}

API

Props

Prop类型默认值说明
modelValue (Vue) / value (React)number1当前页（1-based）
totalnumber0总条数
pageSizenumber10每页条数
siblingCountnumber1当前页两侧显示几个相邻页码
size'sm' | 'md' | 'lg''md'按钮高度
showNavbooleantrue显示上一页 / 下一页箭头
showJumperbooleanfalse显示跳转输入
showTotalbooleanfalse显示「共 N 条」文案

Events

Vue 事件React 回调载荷类型说明
update:modelValueonChangenumber切换页码时触发，1-based

反馈与讨论

Pagination 分页 的讨论

0
0 / 600
正在加载评论...