弹窗中列表前需要多选框,可以复选数据带到父级页面的列表中
之前习惯性的让列表不要分页,方便存取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的值带回来的时候,也能在我们的分页列表中正确的选中之前勾选的项。