TableField 明细

何时使用

• 用于子表单提交场景；

类型定义

自定义操作项配置结构

interface Action {
  content: string; // 操作项文案
  callback: ({index: number, groupId: string, itemValue: any, actionKey: string }) => void; // 点击回调
  render: ({index: number, groupId: string, itemValue: any, actionKey: string }) => ReactNode; // 自定义渲染
}

组件示例

组件属性

属性	说明	类型	默认值
actions	自定义操作项	Action[]	[]
actionsColumnWidth	操作列宽度，单位px	number	70
addButtonBehavior	新增按钮的可操作状态	'NORMAL' | 'DISABLED' | 'HIDDEN'	NORMAL
addButtonPosition	新增按钮位置	'bottom' | 'top'	'bottom'
addButtonText	新增按钮文案	string	'新增一项'
beforeAddClick	添加按钮点击前回调，返回false阻止添加	() => boolean	-
beforeCopyClick	复制按钮点击前回调，返回false阻止复制	( sourceGroupId: string, sourceItem: any ) => boolean	-
beforeDelClick	删除按钮点击前回调，返回false阻止删除	( groupId: string , item: object ) => void	-
beforeImportData	批量导入数据前执行	( data: any[] ) => any[]	-
behavior	表单组件显示状态	Behavior	'NORMAL'
columnsWidth	字段列宽，例如： { node_ockzdxe6of1: '200px' }	Record<string, string>	-
copyButtonText	复制按钮名称	string	'复制'
delButtonText	删除按钮名称	string	'删除'
label	表单组件标题	string	-
labelAlign	表单组件标题的位置	'left' | 'top'	'top'
labelColOffset	设置标题的偏移位置，配置值为栅格值，1代表1/24	number	0
labelColSpan	设置标题的占位宽度，配置值为栅格值，1代表1/24	number	4
labelTextAlign	表单组件的标题对齐方式	'left' | 'right'	'right'
labelTipsIcon	表单组件标题提示信息入口图标，当labelTipsTypes取值为 text 或 render 时生效	string	-
labelTipsRender	表单组件标题提示信息自定义渲染方法，当labelTipsTypes取值为 render 时生效	(props: IComponentProps) => ReactNode	-
labelTipsText	表单组件标题提示文本信息，当labelTipsTypes取值为 text 时生效	string	-
labelTipsTypes	表单组件标题提示信息类型设置	LabelTipsTypes	'none'
layoutSetting.indexName	序号名称	string	'项目'
layoutSetting.isFreezeOperateColumn	是否冻结操作列	boolean	true
layoutSetting.layout	排列方式（表格方式只在 PC 模式下有效），TILED：平铺方式、TABLE：表格方式	'TILED' | 'TABLE'	'TABLE'
layoutSetting.pcFreezeColumnStartCounts	左侧列冻结，0表示不冻结	'0' | '1' | '2' | '3'	0
layoutSetting.showIndex	是否显示序号	boolean	true
layoutSetting.showTableHead	是否显示表头（只在 PC 表格方式下有效）	boolean	true
layoutSetting.theme	主题（只在 PC 表格方式下有效）	'zebra' | 'split' | 'border'	'split'
maxItems	最大条数，最大 500 条	number	50
moveDown	下移按钮名称	string	'下移'
moveUp	上移按钮名称	string	'上移'
onAddClick	添加按钮点击事件	( newGroupId: string ) => void	-
onChange	onChange 子表单值变化	({ value: any , extra: any }) => void	-
onCopyClick	添加按钮点击事件	( newGroupId: string , copiedItem: any ) => void	-
onDelClick	删除按钮点击事件	( newGroupId: string , copiedItem: object ) => void	-
pageSize	分页条数	'10' | '20' | '30'	20
showActions	是否显示操作列	boolean	true
showCopyAction	是否显示复制按钮	boolean	false
showDelAction	是否显示删除按钮	boolean	true
showDeleteConfirm	是否开启删除确认	boolean	true
showSortable	是否显示排序（只在 PC 表格方式下有效）	boolean	false
size	表单组件尺寸	Size	'medium'
tips	表单组件描述信息，展示在控件下方	string	-
useCustomColumnsWidth	是否自定义其它列宽度	boolean	false
validation	表单组件校验设置，具体使用详见表单校验文档	Validation[]	[]
value	明细组件默认值	any[]	[]
wrapperColOffset	设置表单组件的偏移位置，设置值为栅格值，1代表1/24	number	0
wrapperColSpan	设置表单组件的占位宽度，设置值为栅格值，1代表1/24	number	0