子表单示例

image.png

组件类型 唯一标识
子表单 tableField_l0q1sf8l
单行文本 textField_l0q1sf8m
下拉单选 selectField_l0q1sf8n

获取子表单全部的值

函数示例

  1. this.$("tableField_l0q1sf8l").getValue();

返回值示例

  1. [
  2.   {
  3.     textField_l0q1sf8m: "1",
  4.     selectField_l0q1sf8n: "选项一",
  5.   },
  6.   {
  7.     textField_l0q1sf8m: "2",
  8.     selectField_l0q1sf8n: "选项二",
  9.   },
  10.   {
  11.     textField_l0q1sf8m: "3",
  12.     selectField_l0q1sf8n: "选项三",
  13.   }
  14. ]

获取子表单所有的行标识

函数示例

  1. this.$("tableField_l0q1sf8l").getItems();

返回值示例

  1. ['tfitem_1', 'tfitem_2', 'tfitem_3']

获取子表单指定行数据

函数示例

  1. // 获取子表单组件
  2. let tableField = this.$('tableField_l0q1sf8l'); 
  4. // 获取子表单所有行标识
  5. let items = tableField.getItems();
  7. // 传入指定的行标识
  8. let rowData = tableField.getItemValue(items[0]);

返回值示例

  1. {
  2.   textField_l0q1sf8m: "1",
  3.   selectField_l0q1sf8n: "选项一",
  4. }

获取子表单指定行指定组件数据

函数示例

  1. // 获取子表单组件
  2. let tableField = this.$('tableField_l0q1sf8l');
  4. // 获取子表单所有行标识
  5. let items = tableField.getItems();
  7. // 传入指定的行标识
  8. let rowData = tableField.getItemValue(items[0]);
  10. // 传入指定的组件唯一标识
  11. let fieldValue = rowData["textField_l0q1sf8m"];

返回值示例

  1. "1"

更新子表单指定行数据

函数示例

  1. // 获取子表单组件
  2. let tableField = this.$('tableField_l0q1sf8l');
  4. // 获取子表单所有行标识
  5. let items = tableField.getItems();
  7. // 更新指定行对应字段，需传入指定的行标识，以及更新后的数据Object
  8. tableField.updateItemValue(items[0], {
  9.   textField_l0q1sf8m: "4", 
  10.   selectField_l0q1sf8n: "选项二", 
  11. });

子表单类数据联动

函数示例

  1. export function onChange({ value, extra }) {
  2.   // 需将此方法绑定到子表单的onChange上
  3.   // 子表单数据变更时，除单元格变化引起的数据变更外，公式计算、数据联动或者外部赋值都会触发子表单的 onChange 事件
  4.   // 解构相关属性
  5.   const { formGroupId, from, changes = {} } = extra || {};
  7.   // 必须，避免使用 updateItemValue 更新子表数据后，再次触发 onChange 陷入死循环
  8.   if (from === 'setItemValue') { return };
  10.   // 获取子表单组件
  11.   let tableField = this.$('tableField_l0q1sf8l');
  13.   // 判断是否是子表单内某字段变化
  14.   /* if (changes.fieldId === 'textField_l0q1sf8m' || (changes.name ? changes.name.split(".")[1] === 'textField_l0q1sf8m' : false)) {
  16.   }; */
  18.   // 更新子表单指定列数据，可与上述结合使用
  19.   /* tableField.updateItemValue(formGroupId, {
  20.     'selectField_l0q1sf8n': "选项二", // 更新对应字段
  21.   }); */
  23.   // 结合使用，实现类数据联动效果，支持数据源写法
  24.   if (changes.fieldId === 'textField_l0q1sf8m' || (changes.name ? changes.name.split(".")[1] === 'textField_l0q1sf8m' : false)) {
  25.     tableField.updateItemValue(formGroupId, {
  26.       'selectField_l0q1sf8n': "选项二", // 更新对应字段
  27.     });
  28.   };
  29. }

注意事项

1、onChange函数只能绑定在子表单的onChange上。
2、子表单新Api核心为updateItemValue函数，用于修改子表单指定行组件数据，替代了以往的子表单修改组件Api，解决了数据不同步问题（旧Api为异步函数）。

更新子表单指定行下拉单选/下拉复选/单选/复选的选项值

函数示例

  1. // 获取子表单组件
  2. let tableField = this.$('tableField_l0q1sf8l');
  4. // 获取子表单所有行标识
  5. let items = tableField.getItems();
  7. // 新选项值
  8. let selectOptions = [
  9.   { text: "新选项一", value: "新选项一" },
  10.   { text: "新选项二", value: "新选项二" },
  11.   { text: "新选项三", value: "新选项三" }
  12. ];
  14. // 子表下拉赋选项值，通常用于didMount和新增一项回调，需传入行标识、字段唯一标识、新候选值
  15. tableField.setComponentProps(items[items.length - 1], 'selectField_l0q1sf8n', { dataSource: selectOptions });

注意事项

1、通常需要先在didMount时先对最新一行（items[items.length - 1]）下拉单选/下拉复选/单选/复选进行操作，后续需要在新增一项回调再次操作，若需要通过其他表单获取selectOptions，可使用selectOptions函数。

beforeAddClick函数进阶

函数用途

1、可返回 false 阻止添加，支持 Promise。
2、可用于新增前做一些数据判断，若符合则新增，反之阻断新增。
3、也可结合Promise实现一些数据调用校验，亦或是dialog提醒。

函数使用

  1. export function beforeAddClick() {
  2.   // 可返回 false 阻止添加，支持 Promise
  3.   return new Promise((resolve, reject) => {
  4.     this.utils.dialog({
  5.       method: 'confirm', // 'alert', 'confirm', 'show'
  6.       title: '是否新增',
  7.       content: '是否新增？', // 如需换行可传入 HTML/JSX 来实现
  8.       onOk: () => {
  9.         // 允许新增
  10.         resolve();
  11.       },
  12.       onCancel: () => {
  13.         // 阻断新增
  14.         reject();
  15.       },
  16.       onClose: () => {
  17.         // 阻断新增
  18.         reject();
  19.       }
  20.     });
  21.   });
  22. }

子表单内类组件set、get方法

函数用途

1、可以像非子表单组件那样使用组件的set、get方法，如setValue()、setBehavior()、getValue()、getBehavior()
2、此方法有一定的局限性，目前未知。

函数示例

  1. // 获取子表单组件
  2. let tableField = this.$('tableField_l0q1sf8l');
  4. tableField.getComponent(formGroupId, 'textField_ktds6lor').setValue("")