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