1.0.0 • Published 9 months ago
pro-search-table-component v1.0.0
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 |
1.0.0
9 months ago