ant design vue 表格单选
时间: 2023-09-09 12:10:34 浏览: 49
Ant Design Vue 表格的单选功能可以通过 `type="radio"` 和 `selectedRowKeys` 来实现。
首先,需要在表格组件中设置 `type="radio"`,表示单选。然后,将选中的行的 key 值存储在 `selectedRowKeys` 中,即可实现单选功能。
以下是一个示例代码:
```vue
<template>
<a-table
:columns="columns"
:dataSource="data"
rowKey="id"
@row-select="onRowSelect"
:rowSelection="{
type: 'radio',
selectedRowKeys: selectedRowKeys
}"
/>
</template>
<script>
export default {
data() {
return {
selectedRowKeys: [],
columns: [
{
title: '姓名',
dataIndex: 'name'
},
{
title: '年龄',
dataIndex: 'age'
},
{
title: '地址',
dataIndex: 'address'
}
],
data: [
{
id: 1,
name: '张三',
age: 18,
address: '北京市'
},
{
id: 2,
name: '李四',
age: 20,
address: '上海市'
},
{
id: 3,
name: '王五',
age: 22,
address: '广州市'
}
]
}
},
methods: {
onRowSelect(record) {
this.selectedRowKeys = [record.id]
}
}
}
</script>
```
在上面的代码中,我们设置 `type="radio"`,并在 `rowSelection` 中传入 `selectedRowKeys` 数组,用于存储选中行的 key 值。在 `onRowSelect` 方法中,将当前选中行的 key 值存储到 `selectedRowKeys` 中,即可实现单选功能。