Vue：弹窗中列表的复选框效果实现（列表需要做分页），复选数据带到父组件中

弹窗中列表前需要多选框，可以复选数据带到父级页面的列表中

之前习惯性的让列表不要分页，方便存取selectedRows，但是列表数据量很大的时候不方便用户找数据，而且使用查询条件也会不方便存储之前选中的数据，所以对列表的rowSelection属性中的onChange做了一些改进，正确存取用户选中的数据——

<a-table
          bordered
          size="small"
          :scroll="{ x: 800 }"
          :rowKey="(record) => record.id"
          :rowSelection="{columnWidth:30,selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'checkbox'}"
          :columns="columns"
          :dataSource="data"
          showPagination="auto"
          :pagination="{
          current:this.current,
          showQuickJumper: true,
          total:this.total,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100'],//每页中显示的数据
          showTotal: (total, range) => `共 ${total} 条`}"
          @change="($events,pagination,filters) =>tableChange($events,pagination,filters)"
        >
        </a-table>

如果列表没有分页（:pagination="false"时），我们直接存取当前我们能看到的选中的数据就可以

onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },

如果列表要分页的情况，需要对onSelectChange方法进行改写：

/* 选中列表数据 */
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = [...new Set(selectedRowKeys)]
      this.selectedRows = []
      this.selectedRowKeys.forEach(id => {
        this.selectedRows = this.selectedRows.concat(this.dataList.filter(item => item.id == id))
      })
      this.selectedRows = [...new Set(this.selectedRows)]
    },

———————————————解析过程：—————————————

因为我们发现，列表的onSelectChange的两个参数

selectedRowKeys可以完整带出所有选中的数据的id（无论是否分页，会把所有页面选中的数据id带出）

selectedRows只会带出列表中当前页的选中的对象

———————————————逐项分解：—————————————

我们逐行解析上面的方法：

1、验证发现，如果选中的初始值不为空，我们又增加新的数据，会在selectedRowKeys产生重复的数据，所以我们使用

[...new Set(selectedRowKeys)]

去重，让selectedRowKeys显示当前列表中所有选中的数据id

2、然后，我们先把和父组件传值用的this.selectedRows置为空列表，用于每次修改列表选中数据的时候，都取最新的列表选中的全部对象

3、我们还需要一个列表不分页的全部数据，为this.dataList

然后逐项从this.dataList中找出id和selectedRowKeys对应的对象，这些项才是我们实际上选中的想向父组件传递的数据

我们把找到的项逐一拼到this.selectedRows中

this.selectedRowKeys.forEach(id => {
        this.selectedRows = this.selectedRows.concat(this.dataList.filter(item => item.id == id))
      })

4、最后，为了数据不重复，我们还需要对this.selectedRows进行清理，去除重复项

      this.selectedRows = [...new Set(this.selectedRows)]

这样就得到了正确的数据，我们只需要把最终得到的this.selectedRows传给父组件即可

当然，父组件把this.selectedRows的值带回来的时候，也能在我们的分页列表中正确的选中之前勾选的项。