2022-09-20 周四
文档 ,参考选择和操作的栗子。
html
<table>组件设置可选择属性,选择类型设置为单选,以及绑定点击事件
<a-table
bordered
ref="table"
size="default"
row-key="id"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:row-selection="{ selectedRowKeys: selectedRowKeys,type: 'radio',onChange: onSelectChange }"
>
</a-table>
js
- data
selectedRowKeys: []
- methods
onSelectChange (selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys)
this.selectedRowKeys = selectedRowKeys
}
-
效果
- 主要使用到的api有
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
rowSelection | 列表项是否可选择,配置项 | object | null |
selectedRowKeys | 指定选中项的 key 数组,需要和 onChange 进行配合 | string[] | [] |
type | 多选/单选,checkbox or radio | string | checkbox |
网友评论