最近在开发中发现antd vue的table组件换页以后选中的数据无法记住前一页已勾选的数据
只能记住selectedRowKeys, 但是换页以后selectionRows只有当前页的数据, 现在我需要也有之前勾选的rows数据(即整条数据信息)
<a-table
:columns="columns"
:dataSource="dataSource"
bordered
:pagination="pagination"
:rowSelection="{ onSelect: onSelect, onSelectAll: onSelectAll, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
@change="handleTableChange">
</a-table>
使用组件自带的onSelect事件和onSelectAll事件来记录
onSelect(record, selected) {
selected
? this.selectionRowsPlus.push(record)
: this.selectionRowsPlus.splice(
this.selectionRowsPlus.findIndex(x => x.id === record.id),
1
)
},
onSelectAll(selected, selectedRows, changeRows) {
this.selectionRowsPlus = selected
? this.selectionRowsPlus.concat(changeRows)
: this.selectionRowsPlus.filter(x => !changeRows.find(i => i.id === x.id))
},
// 选中
onSelectChange(selectedRowKeys) {
this.$nextTick(() => {
this.selectedRowKeys = selectedRowKeys
})
},
这样无论是否切换页面 selectionRowsPlus 里面就是我们所有勾选的数据