ant design vue2 table中添加复选框
时间: 2023-09-07 16:13:39 浏览: 231
在Ant Design Vue2的Table组件中添加复选框,可以通过设置`rowSelection`属性来实现。具体步骤如下:
1. 在表格中添加一个列来显示复选框,例如:
```html
<a-table :columns="columns" :data-source="dataSource" :row-selection="rowSelection">
<template slot="selection" slot-scope="text,record,index">
<a-checkbox :checked="selectedRowKeys.includes(record.key)" @change="onSelectChange(record.key)"></a-checkbox>
</template>
</a-table>
```
2. 在`data`中定义`rowSelection`和`selectedRowKeys`属性,并实现`onSelectChange`方法来监听复选框的变化,例如:
```javascript
data() {
return {
columns: [...],
dataSource: [...],
rowSelection: {
selectedRowKeys: [],
onChange: this.onSelectChange
}
}
},
methods: {
onSelectChange(selectedRowKeys) {
this.rowSelection.selectedRowKeys = selectedRowKeys
}
}
```
这样,就可以在Ant Design Vue2的Table组件中添加复选框了。
阅读全文