Ant Design Vue 的 a-table 行选择分页时bug处理

有bug的伪代码如下（示例以 id 来作为 rowKey）：

<a-table
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    :columns="columns"
    rowKey="id"
    :pagination="pagination"
    :data-source="data"
/>    

 

onSelectChange(selectedRowKeys, selectedRows) {
  console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows);
  this.selectedRowKeys = selectedRowKeys;
}

 

当使用a-table对数据进行选择操作时，如果a-table有分页，并且选中的数据跨页，那么就会出现 selectedRowKeys.length 和 selectedRows.length 不一致的情况；

即 selectedRowKeys 的数据是完整的，而 selectedRows 的数据是有缺失的，会丢失其他页选中的数据。

 

解决方案：

将 a-table 的 row-selection 改为

:row-selection="{ selectedRowKeys: selectedRowKeys, onSelect: onSelect }"

选中执行的方法改为

onSelect(record, selected, selectedRows, nativeEvent) {
  if(selected) {
    this.selectedRows.push(record)
    this.selectedRowKeys.push(record.id)
  } else {
    const index = this.selectedRows.findIndex(item => item.id=== record.id)
    this.selectedRows.splice(index, 1)
    this.selectedRowKeys.splice(index, 1)
  }
}