在
Ant Design Vue 中，`
Table` 组件的 `selectedRows` 属性只会保存当
前页
选中的行
数据，翻页后之
前选中的行
数据会被清空。如果需要在翻页后保留之
前选中的行
数据，可以使用以下方法：
1. 在 `
Table` 组件中添加 `rowSelection` 属性，并设置 `getCheckboxProps` 函数，该函数返回一个对象，用于设置行的 Checkbox 的属性。在该函数中可以设置 Checkbox 的初始状态，以及在翻页后保留之
前选中的行
数据。
```html
<template>
<a-
table :columns="columns" :dataSource="dataSource" :rowSelection="rowSelection" />
</template>
<script>
export default {
data() {
return {
dataSource: [], // 表格
数据源
selectedRows: [], // 已
选中的行
数据
rowSelection: {
selectedRowKeys: [], // 已
选中的行的 key 值
onChange: this.handleRowSelectionChange,
getCheckboxProps: record => ({
// 设置行的 Checkbox 的属性
checked: this.selectedRows.some(item => item.id === record.id), // 初始状态为已
选中的行
disabled: record.disabled, // 是否禁用 Checkbox
}),
},
};
},
methods: {
handleRowSelectionChange(selectedRowKeys, selectedRows) {
// 更新已
选中的行
数据
this.selectedRows = selectedRows;
this.rowSelection.selectedRowKeys = selectedRowKeys;
},
},
};
</script>
```
2. 在翻页时，保存已
选中的行
数据，以及更新 `rowSelection` 属性中的 `selectedRowKeys` 和 `selectedRows`。
```html
<template>
<a-
table :columns="columns" :dataSource="dataSource" :rowSelection="rowSelection" @change="handle
TableChange" />
</template>
<script>
export default {
data() {
return {
dataSource: [], // 表格
数据源
selectedRows: [], // 已
选中的行
数据
rowSelection: {
selectedRowKeys: [], // 已
选中的行的 key 值
onChange: this.handleRowSelectionChange,
getCheckboxProps: record => ({
// 设置行的 Checkbox 的属性
checked: this.selectedRows.some(item => item.id === record.id), // 初始状态为已
选中的行
disabled: record.disabled, // 是否禁用 Checkbox
}),
},
pagination: {
current: 1, // 当
前页码
pageSize: 10, // 每页显示条数
total: 0, //
数据总数
},
};
},
methods: {
handleRowSelectionChange(selectedRowKeys, selectedRows) {
// 更新已
选中的行
数据
this.selectedRows = selectedRows;
this.rowSelection.selectedRowKeys = selectedRowKeys;
},
handle
TableChange(pagination) {
// 在翻页时保存已
选中的行
数据
this.pagination = pagination;
this.rowSelection.selectedRowKeys = this.selectedRows.map(item => item.id); // 更新
选中的行的 key 值
this.rowSelection.selectedRows = this.selectedRows; // 更新
选中的行
数据
},
},
};
</script>
```
1968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
