ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题,所以在其中做了封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。
依托于 ProForm 的能力,ProForm 拥有多种形态,可以切换查询表单类型,设置变形成为一个简单的 Form 表单,执行新建等功能。
若您是内网用户,欢迎使用我们的 TechUI Studio 可视化配置生成初始代码。
当你的表格需要与服务端进行交互或者需要多种单元格样式时,ProTable 是不二选择。
成员名称 | 账号 | 手机号 | 角色 | 权限范围 | 操作 |
---|---|---|---|---|---|
巴巴 | [email protected] | 12345678910 | 管理员 | 所有权限 | |
测试 | [email protected] | 10923456789 | 操作员 | 权限点名称1、权限点名称4 | |
测试2 | [email protected] | 109654446789 | 操作员 | 权限点名称1 | |
测试3 | [email protected] | 109223346789 | 操作员 | 无 | |
巴巴 | [email protected] | 12345678910 | 操作员 | 无 |
尽量使用 initialValue 来解决问题,必填项挫败感比较强
IP | CPU | Mem | Disk |
---|---|---|---|
106.14.98.104 | 10% | 20% | 30% |
106.14.98.114 | 10% | 20% | 30% |
106.14.98.124 | 10% | 20% | 30% |
106.14.98.134 | 10% | 20% | 30% |
106.14.98.144 | 10% | 20% | 30% |
106.14.98.154 | 10% | 20% | 30% |
106.14.98.164 | 10% | 20% | 30% |
106.14.98.174 | 10% | 20% | 30% |
106.14.98.184 | 10% | 20% | 30% |
106.14.98.194 | 10% | 20% | 30% |
时间点 | 代码 | 操作 |
---|---|---|
2022-08-30 10:38:32 |
| |
2022-08-30 10:38:27 |
| |
2022-08-30 10:38:34 |
|
RTL means right-to-left.
可以默认隐藏某些栏,但是在操作栏中可以选择
当内置的表单项无法满足我们的基本需求,这时候我们就需要来自定义一下默认的组件,我们可以通过 fieldProps
和 renderFormItem
配合来使用。
fieldProps
可以把 props 透传,可以设置 select 的样式和多选等问题。
renderFormItem
可以完成重写渲染逻辑,传入 item 和 props 来进行渲染,需要注意的是我们必须要将 props 中的 value
和 onChange
必须要被赋值,否则 form 无法拿到参数。如果你需要自定义需要先了解 antd 表单的工作原理。
renderFormItem: (_, { type, defaultRender, formItemProps, fieldProps, ...rest }, form) => {if (type === 'form') {return null;}const status = form.getFieldValue('state');if (status !== 'open') {return (// value 和 onchange 会通过 form 自动注入。<Input// 组件的配置{...fieldProps}// 自定义配置placeholder="请输入test"/>);}return defaultRender(_);};
renderFormItem
的定义, 具体的值可以打开控制台查看。
renderFormItem?: (item: ProColumns<T>,config: {value?: any;onSelect?: (value: any) => void;type: ProTableTypes;defaultRender: (newItem: ProColumns<any>) => JSX.Element | null;},form: FormInstance,) => JSX.Element | false | null;
被 ProTable 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange),但还是可以继续监听 onChange 事件。
你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。
你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。
因为 ProTable 子组件会转为受控模式。因而 defaultValue 不会生效。你需要在 Form 上通过 initialValues 设置默认值。
使用 toolbar
属性扩展配置工具栏渲染。
有些业务有自己的定制逻辑,可以不完全遵循 ProTable 的设计规则,但可以利用 ProTable 的 API 实现。如通过 cardProps
配置卡片属性,通过 headTitle
配置行动点在左侧。
使用卡片标题,行动点在左侧。
ProTable 内置了国际化的支持,作为一个文本量比较少的组件,我们可以自行实现国际化,成本也很低。
这里是全量的文本
const enLocale = {tableForm: {search: 'Query',reset: 'Reset',submit: 'Submit',collapsed: 'Expand',expand: 'Collapse',inputPlaceholder: 'Please enter',selectPlaceholder: 'Please select',},alert: {clear: 'Clear',},tableToolBar: {leftPin: 'Pin to left',rightPin: 'Pin to right',noPin: 'Unpinned',leftFixedTitle: 'Fixed the left',rightFixedTitle: 'Fixed the right',noFixedTitle: 'Not Fixed',reset: 'Reset',columnDisplay: 'Column Display',columnSetting: 'Settings',fullScreen: 'Full Screen',exitFullScreen: 'Exit Full Screen',reload: 'Refresh',density: 'Density',densityDefault: 'Default',densityLarger: 'Larger',densityMiddle: 'Middle',densitySmall: 'Compact',},};// 生成 intl 对象const enUSIntl = createIntl('en_US', enUS);import { ConfigProvider } from '@ant-design/pro-provide';// 使用<ConfigProvidervalue={{intl: enUSIntl,}}><ProTable /></ConfigProvider>;
序号 | border 序号 | 代码 | 头像 | 图片 | 操作 |
---|---|---|---|---|---|
1 | 1 |
| ![]() 预览 | ||
2 | 2 |
| ![]() 预览 |
ProTable 在 antd 的 Table 上进行了一层封装,支持了一些预设,并且封装了一些行为。这里只列出与 antd Table 不同的 api。
request
是 ProTable 最重要的 API,request
会接收一个对象。对象中必须要有 data
和 success
,如果需要手动分页 total
也是必需的。request
会接管 loading
的设置,同时在查询表单查询和 params
参数发生修改时重新执行。同时 查询表单的值和 params
参数也会带入。以下是一个例子:
<ProTable<DataType, Params>// params 是需要自带的参数// 这个参数优先级更高,会覆盖查询表单的参数params={params}request={async (// 第一个参数 params 查询表单和 params 参数的结合// 第一个参数中一定会有 pageSize 和 current ,这两个参数是 antd 的规范params: T & {pageSize: number;current: number;},sort,filter,) => {// 这里需要返回一个 Promise,在返回之前你可以进行数据转化// 如果需要转化参数可以在这里进行修改const msg = await myQuery({page: params.current,pageSize: params.pageSize,});return {data: msg.result,// success 请返回 true,// 不然 table 会停止解析数据,即使有数据success: boolean,// 不传会使用 data 的长度,如果是分页一定要传total: number,};}}/>
列配置中也支持 request,但是只有几种 valueType 支持。
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
request | 获取 dataSource 的方法 | (params?: {pageSize,current},sort,filter) => {data,success,total} | - |
params | 用于 request 查询的额外参数,一旦变化会触发重新加载 | object | - |
postData | 对通过 request 获取的数据进行处理 | (data: T[]) => T[] | - |
defaultData | 默认的数据 | T[] | - |
dataSource | Table 的数据,protable 推荐使用 request 来加载 | T[] | - |
onDataSourceChange | Table 的数据发生改变时触发 | (dataSource: T[]) => void | - |
actionRef | Table action 的引用,便于自定义触发 | MutableRefObject<ActionType> | - |
formRef | 可以获取到查询表单的 form 实例,用于一些灵活的配置 | MutableRefObject<FormInstance> | - |
toolBarRender | 渲染工具栏,支持返回一个 dom 数组,会自动增加 margin-right | (action) => ReactNode[] | - |
onLoad | 数据加载完成后触发,会多次触发 | (dataSource: T[]) => void | - |
onLoadingChange | loading 被修改时触发,一般是网络请求导致的 | (loading:boolean)=>void | - |
onRequestError | 数据加载失败时触发 | (error) => void | - |
tableClassName | 封装的 table 的 className | string | - |
tableStyle | 封装的 table 的 style | CSSProperties | - |
options | table 工具栏,设为 false 时不显示.传入 function 会点击时触发 | {{ density?: boolean, fullScreen: boolean | function, reload: boolean | function, setting: boolean | SettingOptionType }} | { fullScreen: false, reload: true, setting: true } |
search | 是否显示搜索表单,传入对象时为搜索表单的配置 | false | SearchConfig | - |
defaultSize | 默认的 size | SizeType | - |
dateFormatter | 转化 moment 格式数据为特定类型,false 不做转化 | "string" | "number" | ((value: Moment, valueType: string) => string | number) | false | "string" |
beforeSearchSubmit | 搜索之前进行一些修改 | (params:T)=>T | - |
onSizeChange | table 尺寸发生改变 | (size: 'default' | 'middle' | 'small') => void | - |
type | pro-table 类型 | "form" | - |
form | antd form 的配置 | FormProps | - |
onSubmit | 提交表单时触发 | (params: U) => void | - |
onReset | 重置表单时触发 | () => void | - |
columnEmptyText | 空值时的显示,不设置时显示 - , false 可以关闭此功能 | string | false | false |
tableRender | 自定义渲染表格函数 | (props,dom,domList:{ toolbar,alert,table}) => ReactNode | - |
toolbar | 透传 ListToolBar 配置项 | ListToolBarProps | - |
tableExtraRender | 自定义表格的主体函数 | (props: ProTableProps<T, U>, dataSource: T[]) => ReactNode; | - |
manualRequest | 是否需要手动触发首次请求, 配置为 true 时不可隐藏搜索表单 | boolean | false |
editable | 可编辑表格的相关配置 | TableRowEditable | - |
cardBordered | Table 和 Search 外围 Card 组件的边框 | boolean | {search?: boolean, table?: boolean} | false |
debounceTime | 防抖时间 | number | 10 |
revalidateOnFocus | 窗口聚焦时自动重新请求 | boolean | true |
columnsState | 受控的列状态,可以操作显示隐藏 | columnsStateType | - |
ErrorBoundary | 自带了错误处理功能,防止白屏,ErrorBoundary=false 关闭默认错误边界 | ReactNode | 内置 ErrorBoundary |
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
record | 需要新增的行数据,一般来说包含唯一 key | T | {} |
position | 行增加在哪里,开始或者末尾 | top | bottom | bottom |
(...buttonProps) | antd 的 ButtonProps | ButtonProps | — |
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
defaultValue | 列状态的默认值,只有初次生效 | Record<string, ColumnsState>; | - |
value | 列状态的值,支持受控模式 | Record<string, ColumnsState>; | - |
onChange | 列状态的值发生改变之后触发 | (value:Record<string, ColumnsState>)=>void | - |
persistenceKey | 持久化列的 key,用于判断是否是同一个 table | string | number | - |
persistenceType | 持久化列的类类型, localStorage 设置在关闭浏览器后也是存在的,sessionStorage 关闭浏览器后会丢失 | localStorage | sessionStorage | - |
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
filterType | 过滤表单类型 | 'query' | 'light' | 'query' |
searchText | 查询按钮的文本 | string | 查询 |
resetText | 重置按钮的文本 | string | 重置 |
submitText | 提交按钮的文本 | string | 提交 |
labelWidth | 标签的宽度 | 'number' | |