业务功能·

管理后台如何解决分页的批量选择问题

由于分页的缘故,只能拿到当前页的数据,该如何解决管理后台分页表格批量选择的问题?

背景

管理后台分页表格的患者,通过搜索,选中患者,批量发送短信

问题

由于分页只能拿到当前页的数据,就导致以下问题:

  1. 如何汇总选中不同页码的患者
  2. 如何选中搜索条件的所有的患者
  3. 选中搜索条件的所有的患者后,如何去掉某个页面的某个患者

解决方案

element-plus为例

1. 如何汇总选中不同页码的患者?

selection-change:(newSelection: any[]) => void事件中的newSelection,就可以直接拿到不同页码的选中的患者(selections)

2.如何选中搜索条件的所有的患者?

考虑到数据量的问题,不能直接拿到搜索的所有患者数据

搜索条件(searchParam)全选搜索结果状态(isAllSelection)告知后端,由后端查患者数据

3. 选中搜索条件的所有的患者后,如何去掉某个页面的某个患者

2.如何选中搜索条件的所有的患者?解决方案的基础上,进行反选。记录所有分页中未被选中的患者(unselections)

完整例子