Pro-search-table-component NPM

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`

@umijs/max antd @ant-design/pro-components

@everything-registry/sub-chunk-2475

1.0.0

2 years ago