[记录01] Vue2-antd-table : 带radio的单行可点击选择

Html部分

<a-table
    :bordered="true"
    :columns="domainModelTableColumns"
    :dataSource="domainModelTableData"
    :row-selection="{
      selectedRowKeys: selectedRowKeys,
      onChange: onSelectChange,
      type:'radio'
    }"
    :customRow="rowClick"
    >
    <a-icon
      slot="filterIcon"
      slot-scope="filtered"
      type="search"
      :style="{ color: filtered ? '#108ee9' : undefined }"
    />
</a-table>

JS部分

onSelectChange(selectedRowKeys,selectedRow) {
  console.log('selectedRowKeys changed: ', selectedRowKeys,selectedRow);
  this.selectedRowKeys = selectedRowKeys;
  this.domainModelSelectedRow = selectedRow[0]
},
rowClick(record, index) {
  return {
    on: {
      click: () => {
        console.log('123', record, index, this.domainModelSelectedRow)
        this.selectedRowKeys = [`${record.key}`]
        this.domainModelSelectedRow = record
        console.log(this.domainModelSelectedRow, this.selectedRowKeys)
      }
    }
  }
},

根据antd官网设置好行选择器后, type='radio'为单选;

:customRow="rowClick" 

绑定单行点击事件

之前踩坑, 单行选择器是根据selectedRowKeys, 即单条record数据的key绑定的, 故在

this.selectedRowKeys = [`${record.key}`]

点击单行事件时改变此时的单行的key值即可实现radio变化

再记录一条踩过的坑: 例如:在table第1页选择第2行数据, 翻页到第2页时,自动选定了第2页的第2行数据, 是因为没有设置table每条数据的key值, 自动设置key值重复, 行选择器根据key绑定数据

setKeys() {
  this.domainModelTableData.forEach((item) => {
    item.key = String(Math.random())
  })
},

获取table数据之后随机数赋key值可解决