PageTable 分页表格

基于 TanStack Table 构建，支持搜索、排序、列管理、行选择、行操作、拖拽排序、无限滚动等。

何时使用

  • 需要展示结构化表格数据时。
  • 需要搜索、排序、分页、行选择等表格能力时。

基础用法

<script setup lang="ts">
import { ref } from "vue";
import { PageTable } from "@reglow/reui";
import type { ColumnDef } from "@tanstack/vue-table";

interface User { id: number; name: string; email: string; }

const columns: ColumnDef<User>[] = [
  { accessorKey: "name", header: "姓名" },
  { accessorKey: "email", header: "邮箱" },
];

const data: User[] = [
  { id: 1, name: "张三", email: "zhang@example.com" },
  { id: 2, name: "李四", email: "li@example.com" },
];

const page = ref(1);
const pageSize = ref(20);
</script>

<template>
  <PageTable
    :columns="columns"
    :data="data"
    :total="100"
    v-model:page="page"
    v-model:page-size="pageSize"
    :page-size-options="[10, 20, 50, 100]"
    searchable
  />
</template>
名称
邮箱
张三zhang@example.com
李四li@example.com
共 2 条
每页条
第 1-2 条1 / 1

搜索

通过 searchable、search-keys 开启搜索功能，使用 v-model:search 双向绑定搜索词。

<script setup lang="ts">
import { ref } from "vue";

const search = ref("");
</script>

<template>
  <PageTable
    :columns="columns"
    :data="data"
    searchable
    search-placeholder="搜索..."
    v-model:search="search"
    :search-keys="['name', 'email']"
  />
</template>

行选择

通过 selectable 开启行选择，使用 v-model:row-selection 双向绑定选中状态。

<script setup lang="ts">
import { ref } from "vue";

const rowSelection = ref({});
</script>

<template>
  <PageTable
    :columns="columns"
    :data="data"
    selectable
    v-model:row-selection="rowSelection"
    @row-selection-change="(val) => console.log(val)"
  />
</template>

行操作

通过 row-actions 配置行操作按钮，支持确认弹窗、样式变体等。

<script setup lang="ts">
import type { RowAction } from "@reglow/reui";

const rowActions: RowAction<User>[] = [
  {
    key: "edit",
    label: "编辑",
    onClick: (row) => console.log("编辑", row),
  },
  {
    key: "delete",
    label: "删除",
    variant: "destructive",
    confirm: { title: "确认删除？", description: "此操作不可撤销" },
    onClick: (row) => console.log("删除", row),
  },
];
</script>

<template>
  <PageTable :columns="columns" :data="data" :row-actions="rowActions" />
</template>

加载状态

通过 loading 显示加载状态，loading-animation 控制动画样式。

<template>
  <PageTable :columns="columns" :data="data" loading loading-animation="spin" />
</template>

无限滚动

通过 infinite-scroll 替代分页，配合 loading-more、has-more 和 load-more 事件。

<script setup lang="ts">
import { ref } from "vue";

const loadingMore = ref(false);
const hasMore = ref(true);

const onLoadMore = () => {
  loadingMore.value = true;
  // 加载更多
  setTimeout(() => {
    loadingMore.value = false;
  }, 1000);
};
</script>

<template>
  <PageTable
    :columns="columns"
    :data="data"
    infinite-scroll
    :loading-more="loadingMore"
    :has-more="hasMore"
    @load-more="onLoadMore"
  />
</template>

列管理

用户可通过列管理按钮控制列的显示/隐藏，支持拖拽排序。

<template>
  <PageTable :columns="columns" :data="data" />
</template>

导入

import { PageTable } from "@reglow/reui";
import type { PageTableProps, RowAction } from "@reglow/reui";

Props

属性类型默认值说明
columnsColumnDef[]-列定义（TanStack Table）
dataTData[]-数据
totalnumber0总条数
pagenumber1当前页（v-model）
pageSizenumber20每页条数（v-model）
loadingbooleanfalse加载中
loadingColorstringcurrentColor加载颜色
loadingAnimation"spin" | "pulse" | "bounce""spin"加载动画
searchablebooleantrue可搜索
searchPlaceholderstring-搜索占位
searchKeysstring[]-搜索字段
searchstring-搜索词（v-model）
selectablebooleanfalse可选择行
rowSelectionRowSelectionState-选中行（v-model）
rowActionsRowAction[]-行操作
pageSizeOptionsnumber[][10, 20, 50, 100]每页选项
infiniteScrollbooleanfalse无限滚动
loadingMorebooleanfalse加载更多中
hasMorebooleanfalse有更多数据
rowClass(row) => string-行 class
buttonPermissionMode"hide" | "disable"全局配置无权限行操作的展示方式

Events

事件说明回调参数
update:page页码变化(page: number)
update:pageSize每页条数变化(pageSize: number)
update:search搜索变化(search: string)
update:rowSelection选择变化(rowSelection)
rowSelectionChange选择变化(rowSelection)
loadMore加载更多()

类型

RowAction

属性类型默认值说明
keystring-唯一标识
labelstring-显示文字
iconany-图标
variant"default" | "destructive" | "outline" | "ghost""default"样式
show(row) => boolean-是否显示
confirm{ title, description? }-确认弹窗
tooltipstring-提示
onClick(row) => void-点击回调
QRCode 二维码
QRCode 二维码
Tag 标签
Tag 标签