子表单

介绍

用于子表数据录入，可向子表单面板中拖入组件，支持输入框、单选框、日期选择、文件上传等类型

API

Props

参数	说明	类型	默认值
标题	左侧标题内容	string	"子表单"
编辑默认值	子表单数据默认值	string	''
数据字段	表单字段名	string	"TABLEFIELD_随机八位字符"
数据主键	数据主键	string	""
新增按钮名称	新增按钮名称	string	-
新增按钮状态	新增按钮状态，可选值「普通(normal)」、「禁用(disabled)」、「隐藏(hide)」	string	"普通(normal)"
最大条数	子表单最大条数，达到限制不可新增	number	-
默认展开	自定义选项的配置信息	boolean	false
最小行数	子表单最小行数校验	boolean	false
气泡提醒	表单项气泡提醒，点击标题右侧图标可查看	string	''

events

事件名	说明	回调参数
onChange	子表单值发生变化	value
beforeAddClick	添加回调执行前	-
onAddClick	点击添加	-
beforeCopyClick	复制回调执行前	-
onCopyClick	点击复制	-
beforeRemoveClick	删除回调执行前	-
onRemoveClick	点击删除	-
beforeImportData	批量导入数据前执行前	-
onNodeValueChange	各表单组件值发生变化	-

常见场景配置

自定义校验行数据

自定义校验行数据是子表单中常用的场景，假设有 num1、num2 三个字段，当修改 num2 时，需将根据 num1 的值进行动态判断，num1 等于 1 时字段必填，该场景可通过以下方式实现：

根据 params 中的 subFormRow 参数可以获取到对应行的相关数据

/**
 * @description: 自定义校验
 * @param value 当前表单组件的值
 * @param callback 校验回调传值则代表校验不通过
 * @param ctx 全局上下文
 * @param params { subFormRow:{name:string,rowData:any,rowIndex:number}} 当前行数据(name 当前组件编码,rowData 当前行数据，rowIndex 当前行角标)
 */

function validate(value, callback, ctx, params) {
  if (params.subFormRow.rowData.num1 === 1 && !value) return callback("必填")
  callback() // 通过校验
}

表单项联动-根据输入框输入更新下拉选择选项

表单项联动是指一个表单组件的值变化会触发另一个或多个表单组件的值或状态变化，在子表单中，常见的场景之一是根据一个输入框的输入动态更新另一个下拉选择框的选项。

该场景可通过以下方式实现：

根据 onNodeValueChange 事件中的 params 参数可以修改对应行的组件属性

事件配置

/**
 * 子表单值发生变化
 * @param ctx 全局上下文
 * @param params: Params
 * 
 */
function action(ctx, params) {
  // 如果是选择班级
  if (params.subformRow.name.value === "SELECT1") {
    params.nodes.SELECT2.options.value = ctx.state.options[params.eventParams[0].value]
  }
}

onNodeValue 事件 params 参数

interface Params {
  // 当前行数据
  subFormRow: {
    {
      name:string, // 当前组件编码
      rowData:any, // 当前行数据
      rowIndex:number // 当前行角标
    }
  },
  // 事件参数
  eventParams: Array<any>
  // 行内节点配置
  nodes: any;
}