Skip to main content

In the form, the main table data obtained through the data source is displayed in the sub-table.

This case is from Jing, a three-party developer 」

1. Usage scenarios​

This case can be used when we need to get the main table data to fill in the subform.

2. Implement functions​

2.1. Configure student information table​

2.2. Configuration Table sheet page​

2.3. Add a remote data source to the data source​

Reference documents:Search form instance details by criteria

Data source address:

`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`

The interface configuration is as follows:

2.4. Configure the drop-down radio component​

2.5. Configure drop-down radio component events​

Note that the unique identifier of the component is modified according to the actual situation. Due to the limitation of interface performance, this example supports up to 100 instances in a single query.

export function onClassChange({ value, actionType, item }) {
if (value) {
const loading = this.utils.toast({
title: '数据获取中...',
type: 'loading'
});
this.dataSourceMap.getData.load({
formUuid: 'FORM-4G8667A15KZAZ18LC189F769PN0R2IOTMNZHLG1',
searchFieldJson: JSON.stringify({
textField_lbfwjvxw: value
}),
pageSize: 100
}).then(res => {
loading();
const { data = [] } = res;
const tableData = data.map(item => {
const { formData } = item;
return {
textField_lbfx2ifr: formData.textField_lbfwjvxx, // 姓名
numberField_lbfx2ifs: formData.numberField_lbfwjvxy, // 年龄
numberField_lc72rbdk: formData.numberField_lc72oufl // 总分
};
});
// _.sumBy:lodash方法,宜搭已默认内置,具体可见:https://www.lodashjs.com/docs/lodash.sumBy#_sumbyarray-iteratee_identity
const totalScore = _.sumBy(tableData, 'numberField_lc72rbdk'); // 班级总分
// 班级平均分
const aveScore = totalScore / tableData.length;
this.$('numberField_lc72rbdp').setValue(totalScore); // 班级总分
this.$('numberField_lc72rbdq').setValue(aveScore); // 班级平均分
this.$('tableField_lbfx2ifq').setValue(tableData);
}).catch(error => {
loading();
this.utils.toast({
title: error.message,
type: 'error'
});
});
} else {
this.$('tableField_lbfx2ifq').reset();
this.$('numberField_lc72rbdp').reset();
this.$('numberField_lc72rbdq').reset();
};
}

3. Effect​

4. Try it online​

This doc is generated using machine translation. Any discrepancies or differences created in the translation are not binding and have no legal effect for compliance or enforcement purposes.
© 2014–2025 DingTalk Technology Co., Ltd