antd Table 点击选中行并高亮整行

代码：

<Table
  columns={columns}
  dataSource={list}
  rowSelection={{
    type: 'radio',
    selectedRowKeys: rowKey,
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(selectedRowKeys, selectedRows)
    },
  }}
  rowKey="id"
  bordered
  loading={loading}
  onRow={handleRow}
/>

const handleRow = () => {
    return {
      onClick: (event: any) => {
        event.currentTarget.getElementsByClassName('ant-radio-wrapper')[0].click();
     },
   };
 };

• getElementsByClassName('ant-radio-wrapper')中的antd-radio-wrapper 代表着rowSelection的type="radio"，如果是Checkbox请使用getElementsByClassName('ant-checkbox-wrapper')。

如果不想使用rowSelection 添加选中框可以使用以下方法

• rowClassName 和 onRow 属性
  • rowClassName: 表格行的类名, 如下: 我通过this.setRowClassName方法添加类名
  • onRow: 用于给表格添加事件, 如onClick, onMouseEnter 等内部事件

const [rowId, setRowId] = useState('')

<Table
  columns={columns}
  dataSource={list}
  rowKey="id"
  bordered
  loading={loading}
  onRow={handleRow}
  rowClassName={this.setRowClass}
/>
const handleRow = (record:any)=>{
   return {
      onClick: () => {
        setRowId(record.id)
     },
   };
};
const setRowClass = (record:any) => {
    return record.id === rowId ? 'table-tr-row-id' : ''
}