API 说明

SreachTable

| 属性 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | reload | 修改此值可以刷新页面，对 table 进行增删改查的时候需要修改此值 | number | - | | index | 是否排序号 | boolen | false | | toolBarRender | 渲染工具栏，支持返回一个 dom 数组，会自动增加 margin-right | (action) => ReactNode[] | - | | initAPI | table 请求 url 地址 | SizeType | - | | headerTitle | table header | string | - | | columns | 详细配置看下文 | | | | isMass | 是否批量操作 | boolean | false | | rowKey | 每一列的 key | string | - |

Columns 列定义

请求远程数据比较复杂，详细可以看这里。

| 属性 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | title | 与 antd 中基本相同，但是支持通过传入一个方法 | ReactNode \| ((config: ProColumnType<T>, type: ProTableTypes) => ReactNode) | - | | tooltip | 会在 title 之后展示一个 icon，hover 之后提示一些信息 | string | - | | ellipsis | 是否自动缩略 | boolean | {showTitle?: boolean} | | copyable | 是否支持复制 | boolean | - | | valueEnum | 值的枚举，会自动转化把值当成 key 来取出要显示的内容 | valueEnum | - | | valueType | 值的类型,会生成不同的渲染器 | valueType | text | | order | 查询表单中的权重，权重大排序靠前 | number | - | | fieldProps | 查询表单的 props，会透传给表单项,如果渲染出来是 Input,就支持 input 的所有 props，同理如果是 select，也支持 select 的所有 props。也支持方法传入 | (form,config)=>Record \| Record | - | | formItemProps | 传递给 Form.Item 的配置,可以配置 rules，但是默认的查询表单 rules 是不生效的。需要配置 ignoreRules | (form,config)=>formItemProps | formItemProps | | renderText | 类似 table 的 render，但是必须返回 string，如果只是希望转化枚举，可以使用valueEnum | (text: any,record: T,index: number,action: UseFetchDataAction<T>) => string | - | | render | 类似 table 的 render，第一个参数变成了 dom,增加了第四个参数 action | (text: ReactNode,record: T,index: number,action: UseFetchDataAction<T>) => ReactNode \| ReactNode[] | - | | renderFormItem | 渲染查询表单的输入组件 | (item,{ type, defaultRender, formItemProps, fieldProps, ...rest },form) => ReactNode | - | | search | 配置列的搜索相关，false 为隐藏 | false | { transform: (value: any) => any } | | search.transform | 转化值的 key, 一般用于时间区间的转化 | (value: any) => any | - | | editable | 在编辑表格中是否可编辑的，函数的参数和 table 的 render 一样 | false | (text: any, record: T,index: number) => boolean | | colSize | 一个表单项占用的格子数量,占比= colSize*span，colSize 默认为 1 ，span 为 8，span是 form={{span:8}} 全局设置的 | number | - | | hideInSearch | 在查询表单中不展示此项 | boolean | - | | hideInTable | 在 Table 中不展示此列 | boolean | - | | hideInForm | 在 Form 中不展示此列 | boolean | - | | hideInDescriptions | 在 Descriptions 中不展示此列 | boolean | - | | filters | 表头的筛选菜单项，当值为 true 时，自动使用 valueEnum 生成 | boolean | object[] | | onFilter | 筛选表单，为 true 时使用 ProTable 自带的，为 false 时关闭本地筛选 | (value, record) => boolean | false | | request | 从服务器请求枚举 | request | - | | initialValue | 查询表单项初始值 | any | - | | disable | 列设置中 disabled的状态 | boolean | { checkbox: boolean; } |

valueType 值类型

ProTable 封装了一些常用的值类型来减少重复的 render 操作，配置一个 valueType 即可展示格式化响应的数据。

批量操作

与 antd 相同，批量操作需要设置 rowSelection 来开启，与 antd 不同的是，pro-table 提供了一个 alert 用于承载一些信息。你可以通过 tableAlertRender和 tableAlertOptionRender 来对它进行自定义。设置或者返回 false 即可关闭。

| 属性 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | | | | | | alwaysShowAlert | 总是展示 alert，默认无选择不展示（rowSelection内置属性） | boolean | - | | tableAlertRender | 自定义批量操作工具栏左侧信息区域, false 时不显示 | ({ selectedRowKeys: Key[], selectedRows: T[], onCleanSelected: ()=>void }) => ReactNode) | false | | tableAlertOptionRender | 自定义批量操作工具栏右侧选项区域, false 时不显示 | ({ selectedRowKeys: Key[], selectedRows: T[], onCleanSelected: ()=>void }) => ReactNode) | false |