子表单

介绍

可嵌套在父表单中、支持动态增删和验证的复合型输入控件，用于高效管理一组结构重复的数据条目。

API

Props

参数名	描述	类型	默认值
status	状态	'default' |'disabled'| 'hide'	'default'
title	标题	string	'子表单'
showLabel	显示标题	boolean	true
value	编辑默认值	{[key: string]: any}[]	''
name	数据字段	string	${组件编码}_${长度为8的随机字符串}
showIndexCol	显示序号	boolean	true
indexColWidth	序号列列宽	number	70
rowDraggable	拖动排序	boolean	false
fixedLeft	冻结左侧列	0|1|2|3	0
addBtnTitle	新增按钮名称	string	-
addBtnStatus	新增按钮状态	'normal'|'disabled'|'hide'	'normal '
batchDelete	批量删除	boolean	false
maxCount	最大条数	number	-
showExcelExport	导出Excel	boolean	true
showActionCol	显示操作列	boolean	true
fixedActionCol	冻结操作列	boolean	true
showCopyBtn	复制按钮	boolean	true
copyBtnDisableConditions	按条件禁用	Function	'function action(ctx, params) { return false; }'
copyBtnTitle	复制按钮名称	string	-
copyToBottomText	'复制到底部'文案	string	-
copyToNextRowText	'复制到下一行'文案	string	-
showRemoveBtn	删除按钮	boolean	true
removeBtnDisableConditions	按条件禁用	Function	'function action(ctx, params) { return false;}'
removeBtnTitle	删除按钮名称	string	-
showRemoveConfirm	删除确认	boolean	true
removeConfirmContent	删除确认文案	string	-
showBatchImport	批量导入	boolean	false
uploadAction	解析接口地址	string	-
uploadHeaderData	上传请求header附加的数据	object	-
uploadData	上传请求附加的数据	object	-
pagination	使用分页	boolean	false
pageSize	每页展示数量	string	-
validate	校验	Validate	-
baseStyle	自定义样式	string	-
customClass	类名绑定	string	-
boxStyle	盒模型 ， margin,border,padding设置	BoxStyle	-
scrollWidth	滚动容器宽度	string	-
scrollHeight	滚动容器高度	string	-
actionColWidth	操作列	string	120
columnResizable	是否允许调整列宽	boolean	false
isCustomColWidths	自定义其他列宽	boolean	false
colWidths	其他列宽度	{[key: string]: number}[]	[key: string]: 200}[]
isTableHeaderGroup	表头分组，开启表头分组后可对每列的分组标题进行设置，相邻列的分组标题相同的将合并为复合表头	boolean	false
tableHeaderGroupTitle	分组标题配置，预览时查看效果	{[key: string]: string}[]	{[key: string]: ""}[]
uniqueKey	唯一标识 ， 组件的唯一标识	string	-
rowHandler	行数据处理	Function	'function handleRow(ctx,row) { }'
hideWhenEmptyReadonly	只读状态数据为空时隐藏	boolean	false
tip	气泡提醒	string	-
loop	循环， 循环渲染设置	Loop	-

Props-自定义操作项

参数名	描述	类型	默认值
title	标题	string	-
disableConditions	按条件禁用	Function	'function action(ctx, params) { return false;}'
status	默认状态	'default'|'disabled'|'hide'	'default'

Events

事件名	描述	参数
onChange	子表单值发生变化	ctx params: {[key: string]: any}[]
beforeAddClick	添加回调执行前	ctx params: {data：{[key: string]: any}[],newRow:{[key: string]: any} }
onAddClick	点击添加	ctx params: {data：{[key: string]: any}[],newRow:{[key: string]: any} }
beforeCopyClick	复制回调执行前	ctx params: {data：{[key: string]: any}[],newRow:{[key: string]: any} }
onCopyClick	点击复制	ctx params: {data：{[key: string]: any}[],newRow:{[key: string]: any} }
beforeRemoveClick	删除回调执行前	ctx params: {data：{[key: string]: any}[],row:{[key: string]: any} }
onRemoveClick	点击删除	ctx params: {data：{[key: string]: any}[],row:{[key: string]: any} }
beforeImportData	批量导入数据前执行	ctx params: {data：{[key: string]: any}[] }
onNodeValueChange	各表单组件值发生变化	ctx params: onNodeValueChangeParams

Events - 自定义操作项

事件名	描述	参数
onClick	点击按钮	ctx params: {record:{[key: string]: any}, rowIndex:number}

Type

// 各表单组件值发生变化参数
type onNodeValueChangeParams = {
  delegate:SubFormDelegate,
  eventParams：{value：any，rowData：{[key: string]: any}}[],
  isMount: boolean,
  nodes: {[key: string]: any},
  subformRow: {
    name: string,
    rowData: {[key: string]: any},
    rowIndex: number
  }
}

常见场景配置

导入接口格式说明

// 导入接口传参(默认)
{
  file: excel文件
  columnList: Array 子表单内的组件编码列表，例:["HiInput", "HiRadio", ...]
}

// 导入接口返回值格式示例
{
    "alert": "0",
    "code": "0",
    "data": {
        "filename": "库存余量模版 - 副本.xlsx",
        "data": [
            {
                "A": "[\"https://pangea.hisense.com/img/index/img-index-topic.png\",\"https://pangea.hisense.com/assets/images/readme-1-1f717aef0a4c2ab182ffb12721f087ad.png\"]",
                "B": "1",
                "C": "[\"https://pangea.hisense.com/img/index/img-index-topic.png\",\"https://pangea.hisense.com/assets/images/readme-1-1f717aef0a4c2ab182ffb12721f087ad.png\"]",
                "D": "2020-02-02",
                "E": "{\"ldapFullPath\":\"海信集团\\\\集团公司\\\\流程IT与数据管理部\\\\基础架构与云服务管理部\",\"loginName\":\"yangshuo4\",\"userName\":\"杨硕\"}",
                "F": "{\"orgCode\":\"HB19922045534\",\"orgName\":\"集团公司\"}"
            }
        ],
        "header": {
            "A": "图片上传",
            "B": "开关",
            "C": "附件上传",
            "D": "日期",
            "E": "成员",
            "F": "部门"
        },
        "sheet": "Sheet1"
    },
    "msg": "Successful operation",
    "ts": "1705544709573"
}
// excel填写格式
下拉选择/单选钮：选项值
下拉复选/复选框：选项1,选项2
开关：true/false
用户：账号，多个用逗号隔开，例如：gaohongmei2,duyi，填写多个时需要组件开启多选
部门：部门全路径，多个用逗号隔开，例如：集团公司/海信集团，填写多个时需要组件开启多选
图片/附件：先写以http或https开头的资源地址，多个用逗号隔开

注意：以上的逗号都为英文字符逗号。