在
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.handle
RowSelectionChange,
getCheckboxProps: record => ({
// 设置行的 Checkbox 的属性
checked: this.
selectedRows.some(item => item.id === record.id), // 初始状态为已
选中的行
disabled: record.disabled, // 是否禁用 Checkbox
}),
},
};
},
methods: {
handle
RowSelectionChange(
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.handle
RowSelectionChange,
getCheckboxProps: record => ({
// 设置行的 Checkbox 的属性
checked: this.
selectedRows.some(item => item.id === record.id), // 初始状态为已
选中的行
disabled: record.disabled, // 是否禁用 Checkbox
}),
},
pagination: {
current: 1, // 当
前页码
pageSize: 10, // 每页显示条数
total: 0, //
数据总数
},
};
},
methods: {
handle
RowSelectionChange(
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>
```
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
