generator-min-app/generators/app/templates/src/components/SearchTable/index.md

hcy system layout and pages

# 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 列定义

> 请求远程数据比较复杂，详细可以看[这里](https://procomponents.ant.design/components/schema#request-%E5%92%8C-params)。

| 属性 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 与 antd 中基本相同，但是支持通过传入一个方法 | `ReactNode \| ((config: ProColumnType<T>, type: ProTableTypes) => ReactNode)` | - |
| tooltip | 会在 title 之后展示一个 icon，hover 之后提示一些信息 | `string` | - |
| ellipsis | 是否自动缩略 | `boolean` | `{showTitle?: boolean}` |
| copyable | 是否支持复制 | `boolean` | - |
| valueEnum | 值的枚举，会自动转化把值当成 key 来取出要显示的内容 | [valueEnum](https://procomponents.ant.design/components/schema#valueenum) | - |
| valueType | 值的类型,会生成不同的渲染器 | [`valueType`](https://procomponents.ant.design/components/schema#valuetype) | `text` |
| order | 查询表单中的权重，权重大排序靠前 | `number` | - |
| fieldProps | 查询表单的 props，会透传给表单项,如果渲染出来是 Input,<br />就支持 input 的所有 props，同理如果是 select，也支持 select <br />的所有 props。也支持方法传入 | `(form,config)=>Record \| Record` | - |
| `formItemProps` | 传递给 Form.Item 的配置,可以配置 rules，但是默认的查询表单<br /> rules 是不生效的。需要配置 `ignoreRules` | `(form,config)=>formItemProps` | `formItemProps` |
| renderText | 类似 table 的 render，但是必须返回 string，<br />如果只是希望转化枚举，可以使用[valueEnum](https://procomponents.ant.design/components/schema#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](https://procomponents.ant.design/components/editable-table) | 在编辑表格中是否可编辑的，函数的参数和 table 的 render 一样 | `false` | `(text: any, record: T,index: number) => boolean` |
| colSize | 一个表单项占用的格子数量,`占比= colSize*span`，<br />`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](https://procomponents.ant.design/components/schema#request-%E5%92%8C-params) | - |
| initialValue | 查询表单项初始值 | `any` | - |
| disable | 列设置中 `disabled`的状态 | `boolean` | `{ checkbox: boolean; }` |

### valueType 值类型

ProTable 封装了一些常用的值类型来减少重复的 `render` 操作，配置一个 [`valueType`](https://procomponents.ant.design/components/schema#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` |