合并vueAntd table多选框
时间: 2023-08-04 14:38:17 浏览: 175
要合并 Vue Antd Table 的多选框,你需要使用自定义的多选框列(Checkbox Column),并在其中使用 `render` 函数来渲染多选框。你可以通过以下步骤来实现:
1. 首先,在你的表格组件中定义一个 `selectedRowKeys` 数组来存储已选择的行的 keys。
2. 接下来,在表格的 `columns` 配置中添加一个自定义的多选框列。这个列需要包含一个 `render` 函数,用来渲染多选框。
```
{
title: "操作",
key: "checkbox",
width: "50px",
render: (text, record) => (
<Checkbox
checked={this.selectedRowKeys.indexOf(record.key) !== -1}
onChange={() => this.handleSelectRow(record.key)}
/>
)
}
```
3. 在 `handleSelectRow` 方法中,根据多选框的选中状态来更新 `selectedRowKeys` 数组。
```
handleSelectRow = key => {
const selectedRowKeys = [...this.selectedRowKeys];
if (selectedRowKeys.indexOf(key) !== -1) {
selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1);
} else {
selectedRowKeys.push(key);
}
this.selectedRowKeys = selectedRowKeys;
};
```
4. 最后,在表格的 `rowSelection` 配置中,将 `selectedRowKeys` 设置为已选择的行的 keys。
```
rowSelection={{
selectedRowKeys: this.selectedRowKeys,
onChange: selectedRowKeys => {
this.selectedRowKeys = selectedRowKeys;
}
}}
```
这样,你就可以实现合并 Vue Antd Table 的多选框了。
阅读全文