vue 如何在翻页之后让方法onSelectChangeselectedRowKeys selectionRows中的selectionRows还有翻页前选中的数据并且保留翻页前后选中的数据需要考虑取消选中以及各种情况
要实现在翻页之后保留选中数据,可以通过以下几个步骤来实现:
- 在Vue组件中定义data属性,用于保存选中的行数据:
data() {
return {
selectedRows: [], // 保存选中的行数据
selectedRowKeys: [] // 保存选中的行keys
}
}
- 在Table组件中的onSelectChange方法中更新selectedRows和selectedRowKeys的值:
onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRows = selectedRows; // 更新选中的行数据
this.selectedRowKeys = selectedRowKeys; // 更新选中的行keys
},
- 在Table组件中的rowSelection属性中设置selectedRowKeys和getCheckboxProps方法:
rowSelection: {
selectedRowKeys: this.selectedRowKeys,
getCheckboxProps: record => ({
checked: this.selectedRowKeys.includes(record.key) // 设置选中状态
})
},
- 在Table组件中的pagination属性中设置onChange方法,在翻页时保存选中的行数据:
pagination: {
onChange: (page, pageSize) => {
// 获取当前页的选中行keys
const selectedRowKeys = this.selectedRowKeys.filter(key => {
const row = this.dataSource.find(row => row.key === key);
return row && row.page === page;
});
// 获取当前页的选中行数据
const selectedRows = this.dataSource.filter(row => selectedRowKeys.includes(row.key));
this.selectedRows = selectedRows;
this.selectedRowKeys = selectedRowKeys;
}
},
这样就可以在翻页之后保留翻页前的选中数据,并且考虑取消选中和其他情况
原文地址: https://www.cveoy.top/t/topic/iE8g 著作权归作者所有。请勿转载和采集!