本文已参与「新人创作礼」活动，一起开启掘金创作之路

最近做到跨页数据的选择，以及与子页面进行通信的需求，在此对设计思路进行整理。

需求背景

2个页面：

因为后台数据量庞大，且更新时间不定，因此页面上展示的数据都需要每次请求分页接口：可以传递当前页面page、每个页面展示的count数量等参数。

接口其他参数：

includes:产品id数组，仅返回传入的产品id相关数据，优先级高于其他所有字段

type：当前产品类型，可以返回当前这个type的所有产品数据

excludes:刨除的产品id数组，可与type配合使用

extra:额外的产品id数组，可与type配合使用

（1）list页面展示所有的产品数据，可以进行【勾选】、【勾去】，【全选所有页面所有数据】、【全选当前页面所有】；

（2）selected弹窗展示选中的产品数据，可以进行【勾去】操作

两个页面的选中数据联动。

难点

因为只能拿到当前页面的所有产品id，后续页面并不能拿到

【勾选】/【全选当前页面所有】 【勾去】的情况是比较好处理的：存储☑️的include_ids，selected弹窗用include_ids去请求接口，【勾去】的时候从include_ids中删除对应id

问题在于：

【全选所有页面所有数据】：list跨页全选数据，因为后端接口是分页的，只能拿到当前页面的商品id，所以需要用 type + excludes + extra 三个变量来存储用户选中的产品

逻辑设计

在全选的情况下：selected.all = true; selected.type = search.type;