> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # 子表单 > 本文介绍了子表单的概念、适用场景以及基础功能和高级功能，包括设置面板升级、操作按钮排序优化、平铺模式的折叠/展开功能等。同时涵盖了子表单的批量导入导出等功能，并提供了常见问题解答。 ## 1. 什么是子表单 一种高级的容器组件，可以在其内部添加文本、数值、日期等组件，比如在商品录入时，需要添加多条商品信息等场景可使用。 ## 2. 适用场景 子表单多用于录入数据的时候，比如出库单、入库单、销售单，其中的商品明细就可以用子表单记录，可以根据实际需要录入的数据新增条数。 组件属性以及使用和示例请[**点击此处**](/zh/open/yida/components/interface)查看 ## 3. 基础功能 | **升级项** | **升级前** | **升级后** | | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 【设置面板】 | 设置项混放，无分类，设置项查找困难
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639534014806-1aa7e06d-01cd-4cdd-bea5-2dfe0950285e.png) | 设置项按子表配置思路分类摆放，查找便利；
根据用户高频反馈，局部增加配置功能
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640589923473-6e783d91-26a5-4b42-bb4f-e6012b09c3f6.png) | | 子表单操作按钮排序【编辑态】 | 优先展示新增的操作项，无复制按钮
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639534618672-19a114cf-5a08-4876-9b7a-9963b853ae29.png) | 「复制」、「删除」按钮启用后，作为常驻按钮放在最前，之后再是用户自定义的操作按钮，最后为「上/下移」按钮（启用后展示）；
编辑态下，默认展示全部按钮
**注意：复制按钮暂未全量。**
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639535676873-c49e61b6-f648-4927-89d4-a4525eff2d24.png) | | 子表单操作按钮排序【提交态】 | 不支持复制操作，排序按钮会默认显示
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639534919013-1e4d3866-6ac1-4000-b8c8-3c4bf2fb1b84.png) | 初始状态（仅一条数据）：不可操作删除
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639535791668-8f92acfb-6ac4-4e39-a641-443e9d5c93bb.png) | | 【平铺模式】增加子表单折叠/展开功能 | 会将多条明细全部展示出来，若超过20条会分页展示
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639536016994-61101e03-3674-43c5-b895-3ee317b3d877.png) | （平铺方式下点击下图红色框符号均可出发展开/折叠操作）
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639535938163-3d374b08-fff2-4886-b353-dfe3c3c5b191.png) | | 列冻结（表格方式）
**目前仅支持PC端冻结前几列** | 不支持冻结列
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639647734511-7b8f8e55-df27-4c20-b0fc-fb9cc336507b.png) | 支持自定义冻结几列，最多冻结5列；
**序号也记为1列；**
默认设置无
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640589855553-a266d3ff-13cf-4304-8d8e-1c194ef3e38e.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639648066055-cc49b1fd-74d0-48c0-be9a-f54a8d7c7417.png) | | 自定义序号名称（平铺模式） | 无序号名称设置项
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639726400093-1f2ce841-444e-44b7-b615-8d09eaa60a80.png) | 序号名称可以自定义设置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640590010071-8faf68f5-3e32-4917-937e-721b2b08895f.png) | ### 3.1 排列方式 设置子表单的排列方式，默认以表格方式展示。 #### 3.1.1 表格方式 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640590075141-b153f15b-fc74-4c48-87d8-6ff262852d88.png) 表格 展示效果： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1624327735275-9f6a831b-5e34-4cd7-a5f2-7a6aa3e113ec.png) **注**：主题、显示表头，仅支持在 PC 端排列方式为表格方式时才展示 #### 3.1.2 平铺方式 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640590131527-e208d6df-ee14-4e68-9850-dd35db299137.png) 平铺 效果如图： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1624327834885-752d02f3-aadd-4dce-8276-de5b18efa011.png) ### 3.2 设置新增按钮名称 新增数据的按钮名称默认为新增一项，可以自定义名称，效果如图： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640590184731-4b232373-5048-4487-90e1-e32a103096e4.png) 设置新增按钮名称 ### 3.3 设置删除按钮名称 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640590224102-233139b3-e323-49be-bb7b-002a9db81b41.png) 设置删除按钮名称 ### 3.4 允许新增最大条数 | **能力** | **免费版** | **轻享版** | **专业版** | **专属版** | | ------------- | ------- | ------- | ------- | ------- | | 子表单允许新增最大数据条数 | 50条 | 500条 | 500条 | 500条 | ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640590263343-f60cf14a-09d8-4d23-81da-9d227cb2140b.png) 子表单最大条数 ### 3.5 子表列宽 支持自定义，再长内容也不怕显示不全 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640590315826-34d0392f-b9aa-4015-9763-1a494e23e373.png) 自定义子表单列宽 ### 3.6 批量导入 路径：访问表单即可看见在子表单下会有个批量导入的按钮，点击批量导入即可。（如表单开启了公开访问（免登），则表单内的子表单不支持批量导入操作） **子表单的批量导入模板字段顺序与表单设计字段顺序一致** ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639103028391-d88fae23-9997-4c2a-8713-7d6d0e4bb88d.png) 访问页面 * 子表数据高效录入：支持 Excel 批量导入数据 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639103066121-a732879e-b153-4137-9ad7-77a3056b5611.png) 批量导入页面 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1631165912828-2fddbef2-2800-4fb5-bb09-b41b5f0ea52d.png) 导入成功之后，如图： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1631165949305-39fc8807-dcd6-4ca8-bde7-e80145938801.png) ### 3.7 批量导出 * 子表数据快速导出： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623241303225-1db41ac6-45c2-430f-9657-4fa9d4ef1d88.png) 批量导出 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623241336901-b402c691-cbeb-44d9-b10e-7e4aa65ed3dc.png) 批量导出中 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623241351751-e3ef25a3-16cb-49aa-b419-ede568aa2fda.png) 批量导出成功 ### 3.8 支持主表+子表单内容 Excel 一并导出 * 支持主表单数据 + 子表单数据的一并导出 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639103173167-5e2e556e-37f3-4e23-96bb-f61c4e6326e8.png) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639103224270-70b4c6d2-aa0c-4bb3-8be0-44f9136bb0d7.png) * 导出新能力： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1624954166980-def8fe3e-27c9-474b-a1c9-6bf780a339fe.png) 表单页面 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1624954698054-be153008-8793-41a3-a0a0-7a5717769226.png) 数据详情页面 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1624954735193-3ab54428-66da-4deb-b482-7655ca71f2ad.png) Excel 表格页面 ## 4. 高级功能 ### 4.1 操作列 #### 4.1.1 新建操作列 新建操作列之后，可以点击编辑去操作绑定动作 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640590403001-80c7929e-a497-469f-a0fc-fd123b12860d.png) 操作列 效果如图： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1624328203073-a3e5ad45-f475-4cf1-8c40-4d23604f1200.png) #### 4.1.2 回调函数 参考 [**动作设置**](/zh/yida/form/snftao) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640590448358-26e4968f-0e22-447b-8e14-f4bc00f1e0f3.png) 操作--项目-0 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1624328274961-74b25a9b-365f-40c6-8dbe-38e7c84fe8e7.png) 回调函数 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612068729553-7f9574f7-b7a6-4cfb-8175-8a7c2d3b4b7f.png) JS 面板 #### 4.1.3 定制渲染 支持 jsx ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612069245763-7bcfc033-9831-4068-ad7b-81ab5d97f193.png) 定制渲染-绑定动作 效果如图： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1612069319522-e7dcd829-3f41-4528-899f-2d6b2fdb7d10.gif) ## 5. 常见问题 子表单组件需要至少保留一条数据。 您好，需要配置一个删除动作，如下图所示： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639103754239-5e849aec-fc1d-476e-9e2a-a81b07f0805d.png) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639103815934-c3fbbbc1-7a21-4ac6-b57f-e76b978359b1.png) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634720874855-089b1d75-0ad0-4a3c-b5b7-b7a207f9044e.png) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634720895458-4f465bf0-e480-4f3b-8840-db53f1de2baa.png) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618810682355-f84ba198-1771-429c-9c90-1d92d73977e0.png) **注**：这样操作默认是全删除，勾选批量删除目前还不支持 获取子表单内的数据用于表单校验或作为数据源调用的入参等场景 **参考代码：** ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} const subFormInst = this.$('子表单唯一标识'); // 先获取 行 标识 const items = subFormInst.getItems(); // ["tfitem_1", "tfitem_2"] items.forEach(item => { const fieldInst = subFormInst.getComponent(item, '子表单内部控件的唯一标识'); console.log(fieldInst.getValue()); }); ``` 常用于跨应用关联子表数据以及表单加载时，初始化子表单数据的业务场景。 **参考文档：**[**明细关联明细**](/zh/open/yida/components/form/tableField) 由于子表单数据无法在数据管理页内展示分析且无法导出，所以需要将子表单数据于报表页面表格内进行展示和导出。 **参考文档：**[**子表单数据进行报表分析**](https://www.yuque.com/yida/subject/phggg5) 可以在定制渲染里写上以下代码来实现。 ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} export function onActionRender({ index, groupId, itemValue, actionKey }) { return
{ document.getElementById('anniu').style.display = 'none' }}>操作按钮名称
; } ``` 这个是一个隐藏功能，去表单的编辑页面开启子表单的显示排序就会出现上移下移按钮，如图所示： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640590534905-131e10fa-7824-4e15-827c-242bf546ed4b.png) 配置子表单内组件的自定义校验函数，遍历子表单中的所有数据，跟当前的数据来进行比对 （1）使用一个子表单组件，一个数值组件，然后将数值组件的默认值设置为 1，如图： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639104222813-bb75b6f9-8afc-419c-8cbb-4d06e82d5e08.png) （2）点击子表单>>高级>>新建动作，需要创建两个动作，一个是 onAddClick 点击添加；一个是 onDelClick 点击删除，创建动作写入代码，如图： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1621327572790-605049d2-9792-4dcc-92fe-b027c625373d.png) 以下代码可直接复制使用，**注意**：第一个括号里面输入数值组件的唯一标识，第二个括号里面输入子表单的唯一标识。可参考（3）的设置 ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} this.$('数值组件标识').setValue(this.$('子表单标识').getValue().length); ``` （3）先创建一个 onAddClick 点击添加，如图： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639104135885-d494919b-3458-4da6-bfb0-e10860496601.png) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639104173695-6cdad809-eba2-4dba-a136-a4e15cf38d98.png) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634721072622-1da54535-0be0-4b8b-8858-f6f335de22d3.png) 然后将上面的代码复制过来，如下： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1621328540890-a45715c4-b732-4eeb-b978-6589e148fc0b.png) （4）新建一个 onDelClick 点击删除，也直接复制上面的代码即可： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639103754239-5e849aec-fc1d-476e-9e2a-a81b07f0805d.png) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1621328623657-e04c4fa5-175e-4a75-bb02-bd4c38d778b9.png) 然后将上一段的代码复制下来： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1621328695437-be86603e-0ecc-4178-a354-c1fc3fabc0f5.png) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1621328762872-80305462-5b39-41ce-a101-0ca6bf4485a8.png) 点击保存后，效果展示如下： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1621328796372-f4b3636b-690e-409d-af0e-6d35d8dbcced.png) 删除新增一项的数据，也会自动减少： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1621328826549-59192fd9-7d07-4a77-8f3d-03afd3cde985.png) （1）拉取一个数值组件，在数值组件绑定动作「onChange值发生变化」 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639104297850-54a8eff0-b397-40fe-8137-ff87344d1872.png) （2）在js页面复制以下代码 ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} export function onChange({ value }) { console.log('onChange', value); let a = []; for(let i=0;i ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639104352878-c0a7669f-4fd6-49a8-a289-4442cb775182.png) （3）实现效果 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1639104558573-380c3b74-bb13-4c77-a8ce-c9e9075ee5cf.gif) ### 5.10 子表单隐藏组件获取值为 null 子表单的处理中，隐藏属性 value 值会被重新赋值，配置是 null，故使用隐藏状态的子表单对另外一个子表单赋值就会返回 null 值。 若想实现根据主表字段的值控制子表组件状态，可通过以下步骤实现： **新建变量 dp2** ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1646895050111-1536cdbf-bab5-4825-85c3-244267b3ffdc.png) **子表单单行文本状态绑定变量 state.dp2** ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1646895118856-561f4cdd-ecf8-4f1d-b03b-a86050e13e36.png) **主表下拉单选组件绑定动作给变量 dp2 赋值状态** ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1646895266615-edbdffb0-8e9f-4d07-860c-cbe605623aca.png) 代码示例： ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} export function onChange({value, actionType, item}) { console.log('onChange', value); if(value=="选项一"){ this.setState({ dp2: "DISABLED"}) } else{ this.setState({ dp2: "HIDDEN" }) } ``` 在主表成员组件绑定动作进行赋值，如下图： ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1647566178664-fc0eabac-316f-441c-a012-b607cf6f2cb2.png) **代码示例：** ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} export function onChange({ value }) { if (value && value.length > 0) { let newValue = value.map((item) => { return { "子表单成员组件唯一标识": { label: item.label, value: item.value } } }) // 将值赋值入当前页面明细组件 this.$("子表单组件唯一标识").setValue(newValue); } else { this.$("子表单组件唯一标识").reset(); } } ``` 子表单中无法插入子表组件，但可以放入其他普通组件，免费版最多可放入20个，其他版本最多可放入100，超出会导致加载性能下降，推荐做业务拆分。 ### 5.11 如何获取子表单的数据 可以使用组件通用 API `getValue` 来获取子表单的数据。 **代码示例：** ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} this.$('子表单组件唯一标识').getValue(); // 获取子表单的数据 ``` **返回示例：** ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} [ { textField_lzjl01sh: '单行文本1', numberField_lzjl01si: 1, }, { textField_lzjl01sh: '单行文本2', numberField_lzjl01si: 2, }, { textField_lzjl01sh: '单行文本3', numberField_lzjl01si: 3, } ] ``` ### 5.12 如何获取子表单的行标识 可以使用子表单 API `getItems` 来获取子表单的行标识。 **代码示例：** ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} this.$('子表单组件唯一标识').getItems(); // 获取子表单的行标识 ``` **返回示例：** ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} ['tfitem_1', 'tfitem_2', 'tfitem_3'] ``` ### 5.13 如何获取子表单指定行的数据 可以使用子表单 API `getItemValue` 来获取子表单指定行的数据。 **代码示例：** ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} this.$('子表单组件唯一标识').getItemValue('指定行的行标识'); // 获取子表单指定行的数据 ``` **返回示例：** ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} { textField_lzjl01sh: '单行文本2', numberField_lzjl01si: 2, } ``` ### 5.14 子表单 onChange 时如何获取当前变更的字段 子表单数据变更时，除单元格变化引起的数据变更外，公式计算、数据联动或者外部赋值都会触发子表单的 onChange 事件，为了方便用户判断识别，可以从子表单 onChange 事件 `extra` 参数中来获取当前变更的字段，从 `changes` 参数中来获取当前变更字段的值。 **代码示例：** ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} // 子表单 onChange export function onTableChange({ value, extra }) { const { fieldId, changes = {} } = extra || {}; // 判断是否是物品名称字段变化 if (fieldId && fieldId === '子表单物品名称字段唯一标识') { // 此处输入字段变化后的执行逻辑 console.log(changes.value); } } ``` **效果：** ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1723020689181-c0c4b57f-79a2-494e-a5b0-f0800b3bea3f.png) ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1723020675605-aefcaf4b-1e15-4972-909d-3b709bb9edd4.png) ### 5.15 子表单内组件变更时如何更新当前行其他字段数据 可以使用子表单 API `updateItemValue` 来更新子表单当前行其他字段的数据。 注意：此 API 只能使用于子表单组件事件中，不可用于子表单内组件事件中。 **代码示例：** ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} // 子表单 onChange export function onTableChange({ value, extra }) { const { formGroupId, from, tableFieldId, fieldId, changes = {} } = extra || {}; // 必须，避免使用 updateItemValue 更新子表数据后，再次触发 onChange 陷入死循环 if (from === 'setItemValue') { return; } const tableField = this.$(tableFieldId); // 获取子表单定义 // 判断是否是物品名称字段变化 if (fieldId && fieldId === '子表单物品名称字段唯一标识') { tableField.updateItemValue(formGroupId, { 当前行其他组件的唯一标识: '更新后的值', }); // 更新当前行其他组件的值 } } ``` **效果：** 物品名称输入后，将**物品名称**的值赋值给当前行**物品名称复制**的值。 ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1723021106150-f667c999-8ff1-45b4-ad3e-e983374233bd.png)