跳到主要内容

ProTable

内置查询、分页、行选择、列设置和操作列的页面级表格抽象组件。

VEF 专属组件。 在 v2.1.6 中从 @vef-framework-react/starter 迁移到 @vef-framework-react/components。

适用场景​

  • 任何需要查询 + 分页 + 行操作的数据列表页面。
  • 需要列可见性控制或虚拟滚动的表格。

基础用法​

import { ProTable } from '@vef-framework-react/components';
import type { TableColumn } from '@vef-framework-react/components';

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

const columns: TableColumn<User>[] = [
  { title: '姓名', dataIndex: 'name' },
  { title: '状态', dataIndex: 'status' },
];

export default function UserTable() {
  return (
    <ProTable<User, UserSearchParams>
      columns={columns}
      rowKey="id"
      queryFn={findUserPage}
      queryParams={searchParams}
      operationColumn={{
        width: 120,
        render: (row) => (
          <OperationButton permTokens="user:edit" onClick={() => openEdit(row)}>
            编辑
          </OperationButton>
        )
      }}
    />
  );
}

非分页模式​

<ProTable<User, UserSearchParams>
  isPaginated={false}
  columns={columns}
  rowKey="id"
  queryFn={findUserList}
/>

行选择​

<ProTable
  columns={columns}
  rowKey="id"
  queryFn={findUserPage}
  rowSelection={true}
  onSelectedRowKeysChange={(keys, rows) => setSelected(rows)}
/>

命令式 Ref​

import { useRef } from 'react';
import type { ProTableRef } from '@vef-framework-react/components';

const tableRef = useRef<ProTableRef>(null);

// 手动刷新
tableRef.current?.refetch();

<ProTable ref={tableRef} ... />

API​

属性类型默认值说明
columnsTableColumn<TRow>[]—列定义
rowKeyDeepKeys<TRow> | (row) => Key—行键提取器
queryFnQueryFunction<PaginationResult<TRow>, ...>—数据获取函数
queryParamsTParams—额外查询参数
queryEnabled(params?) => boolean—是否启用查询
isPaginatedbooleantrue启用/禁用分页
showSequenceColumnbooleantrue显示序号列
virtualbooleanfalse启用虚拟滚动
columnSettingsColumnSettingsConfig | false{}列可见性设置
operationColumnOperationColumnConfig<TRow>—每行操作列
rowSelectionRowSelectionConfig<TRow> | true—行选择配置
titleReactNode—表格上方标题
headerReactNode—标题上方内容
summaryReactNode—表格下方汇总
footerReactNode—底部内容
onSelectedRowKeysChange(keys, rows) => void—选择变化回调

ProTableSubscriber​

从组件外部订阅表格加载事件：

import { ProTableSubscriber } from '@vef-framework-react/components';

<ProTableSubscriber
  tableRef={tableRef}
  onLoading={() => setLoading(true)}
  onLoaded={() => setLoading(false)}
/>