TableField 明细 - DingTalk Help Center

何时使用

用于子表单提交场景；

类型定义

自定义操作项配置结构

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`