有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) } }
标签:index,Vue,Ant,record,selectedRowKeys,Design,selectedRows,table,id From: https://www.cnblogs.com/djjlovedjj/p/18518001