一看就会，超有用活字格技能：一百八十二、主子孙表数据一键添加

组件的功能已经上线有一段时间了，不知道大家感觉怎么样呢，今天给大家带来的就是利用组件和图文列表去实现一个页面的主子孙表一键添加的效果。实际上就是一个图文列表嵌套的应用，话不多说，我们直接上干货
首先，我们看一下表结构，主子孙三张表中都有内容和备注两个记录数据的字段，子表中有主表id字段用来关联主表，孙表中有子表id字段用来关联子表



然后这里的详情页面需要同时展示主子孙表，所以我们需先现创建一个孙表组件，孙表组件中创建一个子表id属性，孙表表格设置查询条件用来查询孙表格的数据，用excel函数将孙表表格数据拼接为一个对象数组的字符串，再利用组件单元格值的属性，和详情页面的子表进行数据交互。(demo中是两列字段excel函数拼接数据表数据为json的示例，多个字段可以使用相同的excel函数拼接即可)

孙表组件创建好之后，我们来看一下详情页面的构建，和普通的详情页面一样，分为主表内容填写区域，和子表内容填写区域，不同的点在于子表数据填写区域是一个图文列表

图文列表内容是子表内容填写区域，和孙表组件区域，其中孙表组件区域通过组件单元格本身值和孙表数据列关联，实现孙表json对象数组和外部交互的功能。子表id属性传入关联的子表id列，实现孙表展示的是对应子表数据的功能。

当页面中的数据设置完了之后，新增，修改的操作我们通过服务端命令去实现

其中孙表的数据我们需要现进行反序列化处理后再操作。
由于是用的图文列表，孙表数据的变动，不好获取，所以修改数据的话，我们可以通过先根据主表id删除所有孙表关联的数据，然后再添加的方式实现

附上demo供大家参考~