antd table 点击行触发radio 或 checkbox

 1. const selectedRowKeys = [] // 定义选中的key数组

 2.// 单选
 const rowRadioSelection = {
      selectedRowKeys: selectedRowKeys,   //  选中行的key
      type: 'radio',                      // 类型 : radio & checkbox
      onChange: onSelectedRowKeysChange, 
    } 


3. // 改变selectedRowKeys onSelectedRowKeysChange = (selectedRowKeys: string[]) => { this.selectedRowKeys = selectedRowKeys }

4. // 点击行事件
 rowRadioSelected = (record) => {
  
if (!this.selectedRowKeys.length) {
    
this.selectedRowKeys.push(record['key'])
   }
else {
    
if (this.selectedRowKeys.indexOf(record['key']) === -1) {
      
this.selectedRowKeys.splice(0, 1, record['key'])
    }
   }

5. // antd table components

<Table
  rowKey
={(_, i) => `${i}`}
  columns
={this._columns}
  dataSource
={modelList && modelList.slice()}
  rowSelection
={ rowRadioSelection}
onRow
={record => {
return {
onClick: ()
=> {
       rowRadioSelected(record)
      },
     }
}
}
/>

参考: https://codesandbox.io/s/000vqw38rl

猜你喜欢

转载自www.cnblogs.com/aloehui/p/10178396.html