Ant Design的
表格组件在Vue项目中的
用法和React项目中有所不同，但是也提供了Checkbox组件和
Table组件用于
全选控制，可以通过以下步骤实现：
1. 在columns数组中添加一个Checkbox列，设置scopedSlots属性返回Checkbox组件。
```javascript
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: '',
key: 'checkbox',
scopedSlots: { customRender: 'checkbox' },
},
];
```
2. 在
Table组件中添加一个slot属性，设置name为checkbox，返回
全选的Checkbox组件。
```html
<tem
plate>
<div>
<Checkbox v-model="isAllSelected" @change="handleCheckAllChange">Select All</Checkbox>
<
Table :columns="columns" :dataSource="data" :rowSelection="rowSelection">
<tem
plate v-slot:checkbox="{ record }">
<Checkbox :checked="selectedRowKeys.includes(record.key)" @change="handleCheckboxChange(record)" />
</tem
plate>
</
Table>
</div>
</tem
plate>
```
3. 在Vue组件中设置selectedRowKeys和isAllSelected属性，以及handleCheckboxChange和handleCheckAllChange方法，用于控制
选中的行和
全选/
反选功能。
```javascript
data() {
return {
columns: [...],
data: [...],
selectedRowKeys: [],
isAllSelected: false,
};
},
computed: {
rowSelection() {
return {
selectedRowKeys: this.selectedRowKeys,
onChange: this.handleRowSelectionChange,
};
},
},
methods: {
handleCheckboxChange(record) {
const rowKey = record.key;
const selectedRowKeysCopy = [...this.selectedRowKeys];
const index = selectedRowKeysCopy.indexOf(rowKey);
if (index >= 0) {
selectedRowKeysCopy.s
plice(index, 1);
} else {
selectedRowKeysCopy.push(rowKey);
}
this.selectedRowKeys = selectedRowKeysCopy;
this.isAllSelected = this.selectedRowKeys.length === this.data.length;
},
handleCheckAllChange(e) {
if (e.target.checked) {
this.selectedRowKeys = this.data.map((record) => record.key);
} else {
this.selectedRowKeys = [];
}
this.isAllSelected = e.target.checked;
},
handleRowSelectionChange(selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys;
this.isAllSelected = selectedRowKeys.length === this.data.length;
},
},
```
这样就可以在
表格外部添加一个
全选的Checkbox，控制
表格的
全选/
反选功能了。同时也需要注意，在
Table组件中添加rowSelection属性，用于控制
选中的行。
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
