场景描述
当业务场景中，存在主-副结构的层级数据时，可以通过嵌套「列表」组件来展示数据间的关联关系，例如：
- 工单场景中，第一层展示客服人员列表，第二层展示客服人员所负责的工单列表
- 电商场景中，第一层展示商品列表，第二层展示商品对应的订单列表
配置步骤
配置父级列表
- 在页面中拖入一个「列表」组件，用「列表生成器」快速生成客服人员列表
250px|700px|reset
- 按需微调列表配置
250px|700px|reset
- 子列表根据父级列表进行过滤，展示「客服人员」负责的「工单列表」
- 相关 filter 示例
// searchObjectE5C2C0745D35 为当前数据请求的名称，实际运行中需要替换成你的数据请求// sItem.serviceStaff._id 为子对象关联父对象的关联字段id，实际运行中需要替换成你的关联字段// item._id 为父对象当前列表项的_id，而item为父对象当前列表项，实际运行中按item._id配置即可{ { searchObjectE5C2C0745D35.data.items.filter((sItem) => sItem.serviceStaff._id === item._id) }}}
250px|700px|reset
- 配置完成后，即可达到预期效果：客服人员下对应的是他负责的工单列表
250px|700px|reset
方法二：使用环境变量，在父列表请求成功后，请求子列表对应的数据
在数据量比较大的场景，推荐使用方法二，可以按照分页存储数据
- 在区块中拖入一个新的「列表」组件，用「列表生成器」快速生成工单列表
250px|700px|reset
- 按需微调内容配置
250px|700px|reset
- 创建 JS 方法
- 功能：「根据父记录的id，执行子记录列表的查询」
- 代码：
// searchObjectE5C2C0745D3 为当前数据请求「子列表请求」的名称，实际运行中需要替换成你的数据请求const pList = params.parentList;(pList || []).map((pItem) => { const pId = pItem._id searchObjectE5C2C0745D3.trigger({params: {pId: pId}})}))
250px|700px|reset
250px|700px|reset
- 配置父级列表数据请求：成功后，获取每个父级列表下的子列表数
250px|700px|reset
- 创建一个页面变量，用于承载子列表对应的数据
250px|700px|reset
- 配置子列表数据请求：成功后，更改环境变量的值
250px|700px|reset
- 配置子列表数据：依赖「页面变量」的值进行子对象渲染
250px|700px|reset
FAQ
如何获取上层的行 id
250px|700px|reset
