盘古低代码

子表单 ​

image

介绍 ​

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

API ​

Props ​

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

events ​

事件名说明回调参数
onChange子表单值发生变化value
beforeAddClick添加回调执行前-
onAddClick点击添加-
beforeCopyClick复制回调执行前-
onCopyClick点击复制-
beforeRemoveClick删除回调执行前-
onRemoveClick点击删除-
beforeImportData批量导入数据前执行前-
onNodeValueChange各表单组件值发生变化-
javascript
interface IRowData {
  name: any; // key为数据字段 value是对应组件的值
  status_name: "hide" | "default"; // key为status_数据字段 value是对应组件的状态
}

常见场景配置 ​

自定义校验行数据 ​

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

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

js
/**
 * @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 参数可以修改对应行的组件属性

相关数据 ​

js
// 下拉选择框1的选项列表
options:[{
  key:"val1",
  value:"选项1"
},{
  key:"val2",
  value:"选项2"
}]

// 下拉选择框2 的选项列表 MAP
options2:{
  "val1":[{
    key:"val11",
    value:"选项11"
  },{
    key:"val12",
    value:"选项12"
  }],
  "val2":[{
    key:"val21",
    value:"选项21"
  },{
    key:"val22",
    value:"选项22"
  }]
}

事件配置 ​

js
/**
 * 子表单值发生变化
 * @param ctx 全局上下文
 * @param params: Params
 * 
 */
function action(ctx, params) {
  // 判断如果是 下拉选择框1 触发的事件，根据组件值修改 下拉选择框2 的选项列表
  if (params.subformRow.name.value === "SELECT1") {
    //获取 下拉选择框1  变更 事件的值
    const eventData = params.eventParams[0].value
    // 修改 下拉选择框2 的选项列表
    params.nodes.SELECT2.options.value = ctx.state.options2[eventData]
  }
}

onNodeValue 事件 params 参数 ​

js
interface Params {
  // 当前行数据
  subFormRow: {
    {
      name:Ref<string>, // 当前组件数据字段
      rowData:any, // 当前行数据
      rowIndex:number // 当前行角标
    }
  },
  // 事件参数
  eventParams: Array<EventParam> // 低代码引擎原始事件参数
  // 行内节点配置
  nodes: Record<string, NodeProps>; // 节点数据字段与节点属性的映射
}

// 原始事件参数（根据具体组件事件而定）
interface EventParam {
  value: any; // 事件参数
  rowData: Record<string, any> // 节点数据字段与节点值的映射
}

// 节点属性配置
interface NodeProps {
  ...
}

表单项联动-根据下拉选择的数据展示不同组件 ​

以行为单位来控制部分组件的显隐是使用时比较常见的场景之一

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

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

事件配置 ​

js
/**
 * 子表单值发生变化
 * @param ctx 全局上下文
 * @param params: Params
 * 
 */
function action(ctx, params) {
  // 如果SELECT_FC0YTC5R值为选项1 隐藏INPUT_6WOL7ZES框组件 否则展示
  if (params.subformRow.rowData.value.SELECT_FC0YTC5R === "选项1") {
    params.subformRow.rowData.value.status_INPUT_6WOL7ZES = "hide";
  } else if (params.subformRow.rowData.value.SELECT_FC0YTC5R !== "选项1") {
    params.subformRow.rowData.value.status_INPUT_6WOL7ZES = "default";
  }
}