ProTable - 高级表格
ProTable 是 Antd ProTable 和 ModalForm 的结合，并且融入了删除，前端导出等功能。更加贴合实际场景。
如果你之前并不熟悉 ProTable 的 api，完全可以直接看例子来开始使用。
一个基本的 CRUD 表格
这是一个基本的 CRUD 表格，包含了 查询，新建，编辑，删除。初次接触 ProTable 的用户可能会遇到很多陌生的 api，让人感觉很不舒服 ，没关系，我们会通过几个例子慢慢展开。
| 用户名 | 电话 | 昵称 | 性别 | 创建日期 | 操作 | |
|---|---|---|---|---|---|---|
暂无数据 | ||||||
查询
先来认识一下 request 属性。通过传入一个请求函数，ProTable 就帮我们做好了数据请求，分页，查询，重置等功能。请求函数必须返回一个 promise (一般是一个 axios 实例)，并且 promise 中返回的数据需要满足下面的要求：
// Promise回返的数据格式
{
data: [], // 表格数据源
success: true,
total: 6 // 用于分页
}
<ProTable
request={(params) => requestApi(params)}
...
/>
请求函数的第一个参数 params 会包含分页，搜索等请求参数：
{
current: 2,
pageSize: 5,
... // 其它搜索字段
}
用户可以与后台约定好这些请求参数和返回格式，也可以自已在全局包装一下后传给后台。
| 用户名 | 电话 | 昵称 | 性别 | 创建日期 |
|---|---|---|---|---|
暂无数据 | ||||
新增
接上一个例子，我们先来添加一个新增按钮。
ProTable 内部规划了多个区域用于放置不同的按钮，用户只要在相应的 api 上配置按钮就可以了。这么做一方面能让各表格的功能区域保持清晰统一，另一方面对于终端用户来说也能减少他们对表格操作的熟悉成本。
上图中的红色字是大区块，大区块里还包含黑色的小区块。对于新增按钮来说，可以加到 toolbar 大区块里的 actions 小区块里（也可以加到 title 里）。
<ProTable
toolbar={{
actions: [
<Button
key={1}
type="primary"
>
新增
</Button>,
],
}}
添加了按钮之后，通过 innerRef.current.openModal() 就能打开表单。
<ProTable
innerRef={innerRef}
toolbar={{
actions: [
<Button
key={1}
type="primary"
onClick={() => innerRef.current.openModal()}
>
新增
</Button>,
],
}}
最后设置 onFinish 属性就完成了表单的新增。
<ProTable
columns={getColumns()}
request={mockRequest}
pagination={{ pageSize: 5 }}
innerRef={innerRef}
toolbar={{
actions: [
<Button
key={1}
type="primary"
onClick={() => innerRef.current?.openModal()}
>
新增
</Button>,
],
}}
onFinish={async (values, formType) => {
if (formType === 'new') {
await mockAdd(values);
message.success('新建成功');
actionRef.current?.reload(); // 新增成功后用 actionRef 重新请求接口
}
}}
/>
| 用户名 | 电话 | 昵称 | 性别 | 创建日期 |
|---|---|---|---|---|
暂无数据 | ||||
编辑
接上一个例子，要实现编辑功能，可以在 columns 里增加一个操作列来添加编辑按钮。
// columns
{
title: '操作',
valueType: 'option', // valueType 设为 option 代表是操作列
render: (text, record, index, actionRef, innerRef) => [
<LinkButton
key={1}
onClick={() => innerRef.current?.openModal('edit', record)}
>
编辑
</LinkButton>,
],
},
当 valueType 为 option 时，render 函数会被自动注入 innerRef 参数，通过 innerRef 就可以打开编辑弹框并且对表单赋值。
编辑弹框打开后我们继续完善 onFinish 中的更新部分：
<ProTable
...
onFinish={async (values, formType, formData) => {
if (formType === 'new') {
await mockAdd(values);
message.success('新建成功');
actionRef.current?.reload();
}
if (formType === 'edit') {
await mockUpdate({ ...values, id: formData.id });
message.success('更新成功');
actionRef.current?.reload();
}
}}
/>
从 11 行我们注意到，更新接口除了需要表单值以外，还需要额外传递记录 id 给后台。
我们先来看一下 onFinish 的三个参数：
values- 表单收集到的值。formType- 表单类型（'new' 或 'edit'）formData- 赋给表单的初始值（里面包含 id）
这个 formData 其实就是 innerRef.current?.openModal('edit', record) 里的 record。
因此 id 可以从 formData 里取。
| 用户名 | 电话 | 昵称 | 性别 | 创建日期 | 操作 |
|---|---|---|---|---|---|
暂无数据 | |||||
删除
删除功能与上文中的 request 属性非常相似，ProTable 提供了一个 delFunction 属性，只需要传入一个删除函数，ProTable 就帮我们做好了批量删除和行上删除的功能，
删除函数同样返回一个 promise，参数是所选行的 ids 数组。
要支持批量删除还需要开启行选择功能。
<ProTable
...
delFunction={mockDetroy}
rowSelection={{}}
/>
行上删除的功能默认是关闭的，是为了节省列的横向空间，可以在 columns 里单独开启。
// columns
{
title: '操作',
valueType: 'option', // valueType 设为 option 代表是操作列
render: (text, record, index, actionRef, innerRef) => [
<LinkButton
key={1}
onClick={() => innerRef.current?.openModal('edit', record)}
>
编辑
</LinkButton>,
],
// boolean
enableDelete: true,
// 或者是函数
enableDelete: () => ({
disabled: true,
visible: true,
danger: true,
btnText: '关闭'
}),
},
| 用户名 | 电话 | 昵称 | 性别 | 创建日期 | 操作 | |
|---|---|---|---|---|---|---|
暂无数据 | ||||||
以上就是一个完整的 CRUD 表格 ✨。
基本概念
valueType
ProTable 同样支持 valueType，只是与 SchemaForm 不同的是，ProTable 的 valueType 主要是用于显示。比如当指定 date 类型时，当后台返回一个时间戳时，表格中会自动显示成时间。
| date | dateTime | dateRange | money |
|---|---|---|---|
暂无数据 | |||
renderText 与 render 的区别
在 ProTable 的 column 里 render 跟 renderText 很容易混淆。
renderText更接近于 Antd Table 的 render，但是必需返回 string。最终在表格上显示的时候会把省略号，复制图标（如果有）等内容拼接上去。
render可以完全自定义内容的显示。但是它的第一个参数是 dom 而不是 text，这个需要注意。这个 dom 里包含了省略号和复制图标（如果有）等内容。
| 用户名 | 电话 |
|---|---|
暂无数据 | |
搜索区域的配置项
column 里的 hideInSearch 字段用于控制是否在搜索表单里隐藏。或者用 search: false。两者等效。
{
title: '昵称',
dataIndex: 'nickName',
hideInSearch: true, // 在搜索表单里隐藏
search: false, // 在搜索表单里隐藏
}
也可以在组件级别关闭搜索区域。
<ProTable search={false} />
或者配置搜索区域：
<ProTable
search={{
labelWrap: true, // 过长换行
defaultCollapsed: false, // 默认展开
}}
/>
| 很长很长很长的用户名 | 电话 | 昵称 | 性别 | 创建日期 |
|---|---|---|---|---|
暂无数据 | ||||
type 用于区分各区域
在 ProTable 组件中同一份 columns 既会被用于生成 Table，也有可能被用于生成 Form 又或者 Search。原来我们用 hideInSearch，hideInTable，hideInForm 来控制 column 在各区域的显示与隐藏，但是当 column 变多之后这种反向控制的逻辑就不太好理解，所以我们新增了 type 字段 form | table | search 来正向控制 column 显示在哪个区域，比如 type: search 代表该 column 只会显示在搜索区域。
type: search 的优先级最高, 会覆盖 hideInSearch: true 和 search: false
同时 ProTable 新增了 defaultHideInSearch 属性来全局控制 column 是否默认显示在搜索区域。
| 用户名 | 创建日期 | 操作 |
|---|---|---|
暂无数据 | ||
搜索表单的关联控制
| 用户 | 昵称 |
|---|---|
暂无数据 | |
受控表单
不想使用 request？那就传入 dataSource 当成普通 table 来使用。同样集成了新增编辑功能。
| 用户名 | 电话 | 操作 |
|---|---|---|
| 王先生 | 1596668888 |
导出表格数据
可以使用 exceljs 来导出表格数据。组件已经对数据进行了处理，只需传入 ExcelJS 对象就可以轻松导出。
使用前需要先在自已的项目中安装 exceljs：
npm i exceljs --save
在页面中导入 exceljs:
import * as ExcelJS from 'exceljs';
通过 innerRef.current?.export(rows, ExcelJS) 进行导出。参考示例。
| 用户名 | 生日 | 性别 | 类型 | 会员范围 | 状态 | 创建日期 |
|---|---|---|---|---|---|---|
暂无数据 | ||||||
| 用户名 | 生日 | 性别 | 类型 | 会员范围 | 状态 | 创建日期 | |
|---|---|---|---|---|---|---|---|
暂无数据 | |||||||
更改删除确认框的类型和文字
| 用户名 | 电话 | 昵称 | 性别 | 创建日期 | 操作 | |
|---|---|---|---|---|---|---|
暂无数据 | ||||||
弹窗相关
更改弹窗表单的布局
通过 modalFormProps 属性可以透传 ModalForm 中的属性。
| 用户名 | 电话 | 昵称 | 性别 | 身份证号 | 操作 |
|---|---|---|---|---|---|
暂无数据 | |||||
弹窗只读模式
innerRef.current?.openModal('read', initialData)
| 用户名 | 电话 | 昵称 | 是否会员 | 操作 |
|---|---|---|---|---|
暂无数据 | ||||
表单数据
onOpen 请求数据后回显
点击编辑时请求接口后回显。新击新增时不请求。
| 用户名 | 电话 | 操作 |
|---|---|---|
暂无数据 | ||
约定式
与 SchemaForm 一样，ProTable 同样支持约定式数据处理。
| 用户名 | 部门 | 会员 | 会员等级 | 操作 |
|---|---|---|---|---|
暂无数据 | ||||
利用 innerRef 存储额外信息
与 SchemaForm 一样，ProTable 也能利用 innerRef 存储额外数据。
| 序号 | 员工 | 部门 | 操作 |
|---|---|---|---|
暂无数据 | |||
API
ProTable
ProTable 类型是 ProTableSelfType 和 ProTableOriginType 的结合。
ProTableSelfType
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| columns | 表格或表单的配置描述; | (必选) | |
| request | 获取 dataSource 的方法; | ((params: any, sort: Record<string, SortOrder>, filter: Record<string, (string | number)[] | null>) => Promise<Partial<RequestData<any>>>) | -- |
| actionRef | 用于手动触发 table 的一些操作，比如 reload, reset 等; | -- | |
| innerRef | 一个工具类 ref，包含了一些方法和属性; | -- | |
| name | 用于 table 的 headerTitle 的显示, 还有弹出框的 title 显示; 可以配合 locale 修改文案。 | string | -- |
| onFinish | 点击弹窗确定按钮后的回调; | (values, formType, formData) => Promise | void | -- |
| onOpen | 打开弹框后的回调, 可以在这里请求数据; | (formType, formRef, formData) => Promise | void | -- |
| delFunction | 传入的删除函数; | ((selectedIds: (string | number)[], record: any) => void | Promise<any>) | -- |
| delPermission | 是否有删除权限; 不传默认为有; | (() => boolean) | -- |
| tableAlertOption | 多选删除功能的选项; | -- | |
| tableAlertOptionRender | 自定义 table alert 右侧区域; | false | ((option: { selectedRowKeys: any[]; selectedRows: any[]; onCleanSelected: () => void; }, doms: { delDom?: ReactNode; cancelDom: ReactNode; }) => ReactNode) | -- |
| modalFormProps | 传递给 ModalForm 组件的属性。 | Omit<ModalFormProps, 'innerRef' | 'onFinish' | 'onOpen' | 'columns'> | -- |
| noPadding | 移除 Card 包裹的 padding; 已废弃; 用 cardStyle = false 替代; | boolean | -- |
| delConfirmType | 删除的确认弹框类型。 | "popconfirm" | "modal" | popconfirm |
| delPopconfirmProps | 传给删除确认框的属性。title 和 description 可以是函数; | (Omit<PopconfirmProps, "title" | "description"> & { title?: ReactNode | ((record: any, index: any) => ReactNode); description?: ReactNode | ((record: any, index: any) => ReactNode); }) | -- |
| delModalConfirmProps | 传给删除确认框的属性。title 和 content 可以是函数; | (Omit<ModalFuncProps, "title" | "content"> & { title?: ReactNode | ((record: any, index: any) => ReactNode); content?: ReactNode | ((record: any, index: any) => ReactNode); }) | -- |
| delSuccessProps | 删除成功后的提示属性（传递给 Message 的属性）。false 关闭提示。 | false | MessageConfig | {content: "删除成功", type: "success"} |
| search | 搜索区域的选项; | false | {labelWrap?: boolean} & SearchConfig | -- |
| optionColumnSpaceProps | 传给操作列中包裹各按钮的 Space 组件的属性。 | {size: 'small'} | |
| defaultHideInSearch | columns 中的列是否默认在搜索区域里隐藏。 | boolean | false |
| rakLocale | 用于修改 headerTitle 的后缀文案和 formType 等对应的文案。 | LocaleType | zh_CH |
| formColumns | 弹框中的表单项。 | FormColumnType[] | columns |
ProTableOriginType
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| rowSelection | 选择项配置 | false | (TableRowSelection<any> & { alwaysShowAlert?: boolean; }) | undefined | -- |
| scroll | -- | ({ x?: string | number | true; y?: string | number | undefined; } & { scrollToFirstRowOnChange?: boolean | undefined; }) | undefined | -- |
| classNames | -- | TableClassNamesType<any> | -- |
| styles | -- | TableStylesType<any> | -- |
| indentSize | -- | number | -- |
| title | -- | PanelRender<any> | -- |
| prefixCls | -- | string | -- |
| className | -- | string | -- |
| style | -- | CSSProperties | -- |
| rowKey | -- | string | number | symbol | GetRowKey<any> | -- |
| tableLayout | -- | TableLayout | -- |
| expandable | Config expand rows | ExpandableConfig<any> | -- |
| rowClassName | -- | string | RowClassName<any> | -- |
| footer | -- | PanelRender<any> | -- |
| summary | -- | ((data: readonly any[]) => ReactNode) | -- |
| caption | -- | ReactNode | -- |
| id | -- | string | -- |
| showHeader | -- | boolean | -- |
| components | -- | TableComponents<any> | -- |
| onRow | -- | GetComponentProps<any> | -- |
| onHeaderRow | -- | GetComponentProps<readonly ColumnType<any>[]> | -- |
| direction | -- | Direction | -- |
| sticky | -- | boolean | TableSticky | -- |
| rowHoverable | -- | boolean | -- |
| onScroll | -- | UIEventHandler<HTMLDivElement> | -- |
| measureRowRender | Internal usage, may remove by refactor. | ((measureRow: ReactNode) => ReactNode) | -- |
| dropdownPrefixCls | -- | string | -- |
| dataSource | -- | readonly any[] | -- |
| pagination | -- | false | TablePaginationConfig | -- |
| loading | -- | boolean | SpinProps | -- |
| size | -- | SizeType | -- |
| bordered | -- | boolean | -- |
| locale | -- | TableLocale | -- |
| rootClassName | -- | string | -- |
| onChange | -- | ((pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<any> | SorterResult<...>[], extra: TableCurrentDataSource<...>) => void) | -- |
| getPopupContainer | -- | GetPopupContainer | -- |
| sortDirections | -- | SortOrder[] | -- |
| showSorterTooltip | -- | boolean | SorterTooltipProps | -- |
| virtual | -- | boolean | -- |
| toolbar | ListToolBar 的属性 | ListToolBarProps | -- |
| ghost | 幽灵模式，即是否取消卡片内容区域的 padding 和 卡片的背景颜色。 | boolean | -- |
| params | request 的参数，修改之后会触发更新 | any | -- |
| columnsStateMap | 列状态配置，可以配置是否浮动和是否展示 | Record<string, ColumnsState> | -- |
| onColumnsStateChange | 列状态配置修改触发事件 | ((map: Record<string, ColumnsState>) => void) | -- |
| columnsState | 列状态的配置，可以用来操作列功能 | ColumnStateType | -- |
| onSizeChange | -- | ((size: DensitySize) => void) | -- |
| cardProps | table 外面卡片的设置 | false | CardProps | -- |
| tableRender | 渲染 table | ((props: ProTableProps<any, any, "text">, defaultDom: Element, domList: { toolbar: Element; alert: Element | undefined; table: Element | undefined; }) => ReactNode) | undefined | -- |
| tableViewRender | 渲染 table 视图，用于定制 ProList，不推荐直接使用 | ((props: TableProps<any>, defaultDom: Element) => Element) | undefined | -- |
| tableExtraRender | table 和搜索表单之间的 dom 渲染 | ((props: ProTableProps<any, any, "text">, dataSource: any[]) => ReactNode) | -- |
| searchFormRender | 渲染搜索表单 | ((props: ProTableProps<any, any, "text">, defaultDom: Element) => ReactNode) | -- |
| postData | 对数据进行一些处理 | any | -- |
| defaultData | 默认的数据 | any[] | -- |
| formRef | 操作自带的 form | MutableRefObject<ProFormInstance> | undefined | -- |
| toolBarRender | 渲染操作栏 | false | ((action: ActionType, rows: { selectedRowKeys?: (string | number)[] | undefined; selectedRows?: any[] | undefined; }) => ReactNode[]) | undefined | -- |
| optionsRender | -- | ((props: ToolBarProps<any>, defaultDom: ReactNode[]) => ReactNode[]) | -- |
| onLoad | 数据加载完成后触发 | ((dataSource: any[]) => void) | -- |
| onLoadingChange | loading 被修改时触发，一般是网络请求导致的 | ((loading: boolean | SpinProps) => void) | undefined | -- |
| onRequestError | 数据加载失败时触发 | ((e: Error) => void) | -- |
| polling | 是否轮询 ProTable 它不会自动提交表单，如果你想自动提交表单的功能，需要在 onValueChange 中调用 formRef.current?.submit() | number | ((dataSource: any[]) => number) | -- |
| tableClassName | 给封装的 table 的 className | string | -- |
| tableStyle | 给封装的 table 的 style | CSSProperties | -- |
| headerTitle | 左上角的 title | ReactNode | -- |
| tooltip | 标题旁边的 tooltip | LabelTooltipType | -- |
| options | 操作栏配置 | false | OptionConfig | -- |
| dateFormatter | 暂时只支持 dayjs - string 会格式化为 YYYY-DD-MM - number 代表时间戳 | false | "string" | "number" | (string & {}) | ((value: Dayjs, valueType: string) => string | number) | -- |
| beforeSearchSubmit | 格式化搜索表单提交数据 | ((params: Partial<any>) => any) | -- |
| tableAlertRender | 设置或者返回false 即可关闭 | AlertRenderType<any> | -- |
| type | 支持 ProTable 的类型 | ProSchemaComponentTypes | -- |
| onReset | 重置表单时触发 | (() => void) | -- |
| columnEmptyText | 空值时显示 | ProFieldEmptyText | -- |
| manualRequest | 是否手动触发请求 | boolean | -- |
| editable | 编辑行相关的配置 | RowEditableConfig<any> | -- |
| onDataSourceChange | 可编辑表格修改数据的改变 | ((dataSource: any[]) => void) | -- |
| cardBordered | 查询表单和 Table 的卡片 border 配置 | Bordered | -- |
| debounceTime | 去抖时间 | number | -- |
| revalidateOnFocus | 只在request 存在的时候生效，可编辑表格也不会生效 | boolean | false |
| defaultSize | 默认的表格大小 | SizeType | -- |
| ErrorBoundary | 错误边界自定义 | false | ComponentClass<any, any> | -- |
InnerRefType
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| params | 查询参数。 | any | -- |
| total | 总条数。 | number | -- |
| dataSource | 表格数据。 | any | -- |
| export | 导出表格数据。 | (rows: any, ExcelJS: any, options?: { beforeExport?: ((worksheet: any) => void) | undefined; filename?: string | undefined; } | undefined) => void | (必选) |
| openModal | 用于打开弹窗; formType 可用于在 onFinish 的时候判断表单类型; | (formType?: FormType | undefined, initialValues?: object | null | undefined, cb?: (() => void) | undefined) => void | (必选) |
| formType | 当前的表单类型 | FormType | -- |
| data | 可以存储一些额外数据 | Record<string, any> | (必选) |
| setData | 存入数据; setData 和 react 的 setState 一样, 只需要传入关心的字段就可以, 不会覆盖其它的字段。 | (values: Record<string, any>) => void | (必选) |
TableAlertOptionType
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| enableDelete | 是否开启 alert 上的删除 | boolean | ((selectedRowKeys: any[], selectedRows: any[]) => boolean | EnableDeleteType) | true |
| delPopconfirmProps | 传给 alert 上删除确认框的属性。title 和 description 可以是函数; | (Omit<PopconfirmProps, "title" | "description"> & { title?: ReactNode | ((selectedRowKeys: any[], selectedRows: any[]) => ReactNode); description?: ReactNode | ((selectedRowKeys: any[], selectedRows: any[]) => ReactNode); }) | -- |
| delModalConfirmProps | 传给 alert 上删除确认框的属性。title 和 content 可以是函数; | (Omit<ModalFuncProps, "title" | "content"> & { title?: ReactNode | ((selectedRowKeys: any[], selectedRows: any[]) => ReactNode); content?: ReactNode | ((selectedRowKeys: any[], selectedRows: any[]) => ReactNode); }) | -- |
| spaceProps | 传递给 alert 中包裹各按钮的 Space 组件的属性。 | {size: 'middle'} |
TableColumnType
由于 ProTable 的 columns 既能用于生成 Table 也能用于生成 Form，因此 TableColumnType 类型其实是 TableColumnSelfType，TableColumnOriginType 和 FormColumnType 的结合。
TableColumnSelfType
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| enableDelete | 是否开启操作列上的删除 | boolean | ((record: any, index: number) => boolean | (EnableDeleteType & { btnIndex?: number; })) | undefined | -- |
| renderExport | 定义导出 | ((text: string | number, record: any) => string | number) | -- |
| render | 给 render 方法注入 innerRef | ((dom: ReactNode, record: any, index: number, action: ActionType, innerRef: InnerRef) => any) | -- |
| type | 用于指定该 schema 是被用于表单还是表格 | "search" | "form" | "table" | -- |
| children | 套嵌表格 | TableColumnType<any, "text">[] | -- |
TableColumnOriginType
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 支持 ReactNode 和 方法 | ReactNode | ((schema: ProSchema<any, Omit<ColumnType<any>, "title" | "children" | "render" | "filters" | "onFilter" | "sorter"> & { sorter?: string | boolean | CompareFn<...> | { ...; }; } & { ...; }, ProSchemaComponentTypes, "text", { ...; }>, type: ProSchemaComponentTypes, dom: ReactNode) => ReactNode) | -- |
| className | -- | string | -- |
| sortDirections | -- | SortOrder[] | -- |
| showSorterTooltip | -- | boolean | SorterTooltipProps | -- |
| search | 在查询表单中隐藏 | boolean | { transform: SearchTransformKeyFn; } | -- |
| request | 从服务器请求枚举 | ProFieldRequestData<any> | -- |
| params | 从服务器请求的参数，改变了会触发 reload | Record<string, any> | ((record: any, column: ProSchema<any, Omit<ColumnType<any>, "title" | "children" | "render" | "filters" | "onFilter" | "sorter"> & { ...; } & { ...; }, "form", "text", unknown>) => Record<...>) | -- |
| tooltip | 展示一个 icon，hover 是展示一些提示信息 | LabelTooltipType | -- |
| debounceTime | request防抖动时间 默认10 单位ms | number | -- |
| filters | 表头的筛选菜单项 | boolean | ColumnFilterItem[] | -- |
| onFilter | 筛选的函数，设置为 false 会关闭自带的本地筛选 | boolean | ((value: boolean | Key, record: any) => boolean) | -- |
| sorter | -- | string | boolean | CompareFn<any> | { compare?: CompareFn<any>; multiple?: number | undefined; } | undefined | -- |
| colSpan | -- | number | -- |
| dataIndex | 支持一个数字，[a,b] 会转化为 obj.a.b | any | -- |
| shouldCellUpdate | -- | ((record: any, prevRecord: any) => boolean) | -- |
| rowSpan | -- | number | -- |
| width | -- | string | number | -- |
| minWidth | -- | number | -- |
| onCell | -- | GetComponentProps<any> | -- |
| onCellClick | Please use `onCell` instead | ((record: any, e: MouseEvent<HTMLElement, MouseEvent>) => void) | -- |
| key | 确定这个列的唯一值,一般用于 dataIndex 重复的情况 | Key | -- |
| hidden | -- | boolean | -- |
| fixed | -- | FixedType | -- |
| onHeaderCell | -- | GetComponentProps<ColumnType<any> | ColumnGroupType<any>> | -- |
| ellipsis | 是否缩略 | CellEllipsisType | -- |
| align | -- | AlignType | -- |
| rowScope | -- | RowScopeType | -- |
| sortOrder | -- | SortOrder | -- |
| defaultSortOrder | -- | SortOrder | -- |
| sortIcon | -- | ((props: { sortOrder: SortOrder; }) => ReactNode) | -- |
| filtered | -- | boolean | -- |
| filterDropdown | -- | ReactNode | ((props: FilterDropdownProps) => ReactNode) | -- |
| filterOnClose | -- | boolean | -- |
| filterMultiple | -- | boolean | -- |
| filteredValue | -- | FilterValue | null | -- |
| defaultFilteredValue | -- | FilterValue | null | -- |
| filterIcon | -- | ReactNode | ((filtered: boolean) => ReactNode) | -- |
| filterMode | -- | "menu" | "tree" | -- |
| filterSearch | -- | FilterSearchType<ColumnFilterItem> | -- |
| filterDropdownProps | Can cover `<Dropdown>` props | CoverableDropdownProps | -- |
| filterResetToDefaultFilteredValue | -- | boolean | -- |
| responsive | -- | Breakpoint[] | -- |
| tip | -- | string | -- |
| valueEnum | 支持 object 和Map，Map 是支持其他基础类型作为 key | ProSchemaValueEnumObj | ProSchemaValueEnumMap | ((row: any) => ProSchemaValueEnumObj | ProSchemaValueEnumMap) | -- |
| formItemProps | 自定义的 formItemProps | (FormItemProps<any> & { lightProps?: LightWrapperProps; }) | ((form: FormInstance<any>, config: { key?: Key | undefined; ... 19 more ...; proFieldProps?: (ProFieldProps & Record<...>) | undefined; } & ... 4 more ... & { ...; }) => FormItemProps<...> & { ...; }) | undefined | -- |
| renderText | 修改的数据是会被 valueType 消费 | ((text: any, record: any, index: number, action: ProCoreActionType<{}>) => any) | -- |
| dependencies | 依赖字段的name，暂时只在拥有 request 的项目中生效，会自动注入到 params 中 | any[] | -- |
| ignoreFormItem | 忽略 FormItem，必 须要和 renderFormItem 组件一起使用 | boolean | -- |
| hideInDescriptions | 在 descriptions 隐藏 | boolean | -- |
| hideInForm | 在 Form 中隐藏 | boolean | -- |
| hideInTable | 在 table 中隐藏 | boolean | -- |
| hideInSearch | 在 table的查询表单 中隐藏 | boolean | -- |
| proFieldProps | 设置到 ProField 上面的 Props，内部属性 | (ProFieldProps & Record<string, any>) | -- |
| index | -- | number | -- |
| colSize | 每个表单占据的格子大小 | number | -- |
| initialValue | 搜索表单的默认值 | any | -- |
| copyable | 是否拷贝 | boolean | -- |
| hideInSetting | 不在配置工具中显示 | boolean | -- |
| order | Form 的排序 | number | -- |
| listKey | -- | string | -- |
| readonly | 只读 | boolean | -- |
| disable | 列设置的 disabled | boolean | { checkbox: boolean; } | -- |
| valueType | -- | ProFieldValueType | { type: "money"; status?: "normal" | "active" | "success" | "exception"; locale?: string | undefined; showSymbol?: boolean | ((value: any) => boolean) | undefined; ... 4 more ...; width?: number | undefined; } | ... 4 more ... | undefined | -- |
FormColumnType
EnableDeleteType
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 操作列中的删除按钮是否禁用。 | boolean | -- |
| visible | 操作列中的删除按钮是否可见。 | boolean | -- |
| danger | 操作列中的删除按钮的 danger 属性。 | boolean | -- |
| btnText | 操作列中的删除按钮的文字。 | string | -- |
全局事件
| 事件名 | 描述 | 说明 |
|---|---|---|
| @proTableReload | 组件注册了一个 reload 事件, 可以通过 document.dispatchEvent(new Event('@proTableReload')) 方法来触发表格刷新. 新增这个 reload 事件是希望能在其它的兄弟页面来触发表格页面的 刷新, 比如在一些缓存场景, 新增页面提交成功后能够通过这个事件来触发表格页面的刷新. | v1.0.0 |