Skip to main content

Array Nested Form

WdFormArr

Basic Capabilities​

  • Allows adding multiple sub-fields in array nested forms and supports entering multiple data entries.

  • After upgrading to version 3.12, when the array nested component uses the object array template, it supports switching between card, table, and custom UI modes while retaining the sub-form items within the nested object component.

image

  • Select the corresponding component node and click Style Edit to modify the table template style.

image

Property Description​

External properties received by the component

Property Name
Property Identifier
Type
Description
显示标题labelVisibleboolean

Default value: true

标题对齐labelAlignstring

表单场景下默认会跟随表单容器的标题对齐配置

标题换行labelWrapboolean

如果标题内容过长关闭时只显示一行、溢出省略；开启时换行展示。表单场景下默认会跟随表单容器的标题换行配置

PC端标题位置layoutstring

设置标题在表单组件的展示位置，表单场景下默认会跟随表单容器的标题的位置配置

标题宽度labelWidthstring

您可以输入数值 + px、%等单位，示例：200px

表单场景下默认会跟随表单容器的标题宽度配置

标题提示labelTipsstring

PC/H5端生效

配置标题的工具提示内容

状态statusstring

Example: "edit"

绑定字段namestring

表单字段的Key值，用于提交数据时，匹配数据模型字段标识。表单内需保证唯一。

标题内容labelstring

Example: "标题"

数组嵌套表单值valuearray

Example: []

嵌套表单模板modestring

切换web表格、表单项模版，不支持保留数据模型的字段配置，需重新配置

Example: "obj"

新增表单项初始值addDefaultValuestring
PC端组件尺寸sizestring

尺寸配置仅对PC端生效，表单场景下默认会跟随表单容器的组件尺寸配置

Event Description​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
值改变onDataChangeobject
  • data: array
Compatible with all platforms

组件中的数据内容发生改变时触发

Property API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
绑定字段namestring

表单字段的Key值，用于提交数据时，匹配数据模型字段标识。表单内需保证唯一。

标题内容labelstring
数组嵌套表单值valuearray
是否展示visibleboolean

组件是否展示

是否禁用disabledboolean

组件是否禁用

是否只读readOnlyboolean

组件是否只读

Method API​

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name
Method Identifier
Parameters
Method Description
新增一行add

-

删除该行removeobject
  • index: number删除数据的标识 Default value: -1

-

值改变changeobject
  • name: string改变值的标识，如果name为空，则会将嵌套表单值直接赋值为进value。例如0.input1表示改变数组下标为0的对象内input1的值
  • value: 改变值的value

-

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
根元素.wd-form-obj-root组件最外层元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-form-obj-root {
  /* Write CSS styles here */
}
H5 端根元素.wd-h5-form-obj-root可设定 H5 端的根元素样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-form-obj-root {
  /* Write CSS styles here */
}
PC 端根元素.wd-pc-form-obj-root可设定 PC 端的根元素样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-form-obj-root {
  /* Write CSS styles here */
}
小程序端根元素.wd-mp-form-obj-root可设定小程序端的根元素样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-form-obj-root {
  /* Write CSS styles here */
}

Learn about Style API