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

 

在实际项目遇到个需要,点击整行任意位置,table该列都被选中

效果如上 ,代码如下

  <Table
       rowKey={record => record.id}
       rowSelection={{
                      onChange: this.checkRows,
                     selectedRowKeys:this.state.selectedRows,
                  }}                      
      onRow={(record) => {
             return {
                   onClick: () => {
                         let {selectedRows}=this.state;
                         let  bool=false;
                         selectedRows.find(function(value) {
                                      if(value ===record.id) {
                                                    bool=true;
                                       })
                         if(bool){
                           selectedRows.splice(selectedRows.findIndex(item => item=== record.id), 1)}
                    else{
                             selectedRows.push(record.id)
                      }
                                            this.setState({
                                                selectedRows
                                            })
                                        },
                                    };
                                }}
/>

  checkRows=(selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        this.setState({
            selectedRows:selectedRowKeys,
        })
    };