表单中通过数据源获取主表数据在子表展示
本案例来自三方开发者「Jing」
1. 使用场景
当我们需要获取主表数据填充到子表单中时可以使用此案例。
2. 实现功能
2.1. 配置学生信息表

2.2. 配置表单页面

2.3. 在数据源处增加远程数据源
参考文档:根据条件搜索表单实例详情列表
数据源地址:
`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`
接口配置如图:

2.4. 配置下拉单选组件

2.5. 配置下拉单选组件事件
注意根据实际情况修改组件唯一标识,受接口性能限制,本例单次查询至多支持 100 条实例。

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. 实现效果

4. 在线试玩
本文档对您是否有帮助?