自定义页面表格展示主表和子表信息
1. 案例背景
在表单内既有主表信息又有子表信息的时候,我们想要在自定义页面表格内既展示主表信息又展示子表信息,需要经过特殊的数据处理,这个时候我们可以参考以下案例。
2. 实现效果
💡 实现自定义页面表格既展示主表数据又展示子表数据
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1646200213053-db3b1355-d59a-4e6e-9b83-18a059491581.gif)
3. 实现步骤
3.1 创建数据底表
路径:进入已创建好的应用 >> 页面左上角+号 >> 新建普通表单
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644975815524-eb88c8a8-2d8c-406e-a370-1f8114e768bc.png)
创建数据底表
数据底表组件配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644976236882-3ae76efa-fcbd-49c6-bc7e-a140fb5d49cb.png)
3.2 创建自定义页面
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644976356958-c3d022af-8dfd-4e7a-b4f3-af1c141ade13.png)
创建自定义页面
3.2.1 自定义页面组件配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644977099868-c764d737-0d04-487f-b8fb-9c06bc7ed19b.png)
3.2.2 自定义页面表格字段配置
注意:可根据自身底表内容设置字段配置
标题 | 数据字段 | 数据类型 | 分组标题 |
单行文本1 | danhang1 | 文本 | / |
单行文本2 | danhang2 | 文本 | / |
单行文本11 | danhang11 | 文本 | 子表单 |
单行文本22 | danhang22 | 文本 | 子表单 |
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644990835238-ad581311-9339-4918-ac04-108c8c383559.png)
自定义页面表格字段配置方式
3.2.3 自定义页面表格配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644992042892-c4829c14-32de-4128-bffa-21315268f342.png)
选择表格可折叠/树形表格
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644992154583-15127c9e-eae3-4f20-b043-4c80e739abf2.png)
开启启用树形
3.3 自定义页面数据源配置及绑定
3.3.1 数据源配置
名称:dp2
自动加载:开启
请求地址:/dingtalk/web/应用编码/v1/form/searchFormDatas.json
请求方法:GET
请求参数:名称 :formUuid 参数:底表表单ID
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644991756295-44806e7b-2462-465c-9e40-4a071d67c429.png)
数据源基础配置
3.3.2 数据源数据处理配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644992329250-93f6a869-c283-40eb-8746-5a0f64b6acf9.png)
3.3.3 didFetch 函数内代码配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644992492300-107a56d2-c895-4182-af19-56ce88ec0c67.png)
didFetch 函数代码配置
代码示例:
function didFetch(content) {
const value = [];
const data = content.data.map((item) => {
var c=[]
var d = item.formData.底表子表单组件唯一标识
for (var i = 0; i < d.length; i++) {
const a={
danhang11: d[i].底表子表单那内单行文本3组件唯一标识,
danhang22: d[i].底表子表单那内单行文本4组件唯一标识
}
c.push(a)
}
console.log(c);
let arr = {
danhang1: item.formData.底表单行文本1唯一标识,
danhang2: item.formData.底表单行文本2唯一标识,
children:c
}
value.push(arr);
}
)
let result = {
"data": value,
"currentPage": content.currentPage,
"totalCount": content.totalCount
}
return result;
}
3.3.4 表格绑定数据源
选中表格点击数据源
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644992793205-89432acd-41a1-43ac-8f97-998fc572981a.png)
选择创建好的数据源点击确定
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1644992848952-c8d95291-bdee-4b1f-92ca-7361c88b8932.png)
4. 在线试玩
--------获取宜搭最新信息,欢迎关注我们--------
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1632807780139-91cbcd43-8c42-44f3-9b2d-0d8b799ab7ea.jpeg)
本文档对您是否有帮助?