antd中table组件选中单行换样式（比如背景颜色）

今天项目中有一个需求，点击某一行后，将改行的背景颜色换掉，换成一个比较醒目的颜色。
首先看了看官方，官方还是比较可爱可亲的，都给我们准备好了，

onRow 用法

适用于 onRow onHeaderRow onCell onHeaderCell

<Table
  onRow={
   record => {
   
    return {
   
      onClick: event => {
   }, // 点击行
      onDoubleClick: event => {
   },
      onContextMenu: event => {
   },
      onMouseEnter: event => {
   }, // 鼠标移入行
      onMouseLeave: event => {
   },
    };
  }}
  onHeaderRow={
   (columns, index) => {
   
    return {
   
      onClick: () => {
   }, // 点击表头行
    };
  }}
/>

很明显 这个属性对应的是一个回调函数，这个回调函数是有两个参数的，第一个参数是当前行的信息，第二个参数是当前行在table数组中的下标index

我们这俩主要数onClick这个事件，当我们给onRow赋值为一个回调函数之后，回调函数会执行，返回一个对象

{
   
      onClick: event => {
   }, // 点击行
      onDoubleClick: event => {
   },
      onContextMenu: event => {
   },
      onMouseEnter: event => {
   }, // 鼠标移入行
      onMouseLeave: event => {
   },
    }

当我们单击的时候执行onClick；
后面四个分别是鼠标双击、鼠标右键、鼠标移入和鼠标移出；
我们这俩将onClick后面换成自己的自定义事件

上代码；

 <AAATable
         size={
   'default'}
         columns={
   columnsThird} //表格的列
         dataSource={
   dataTableThird} //表格渲染的数据
         title={
   'INCLUDE列表'} //表格的名字
         onChange={
   this.onChangeTableThird} //可以固定使用
         total={
   totalThird}
         pageSize={
   pageSizeThird}
         current={
   currentPageThird}
         showTotal={
   true}
         rowClassName={
   this.rowClassNameFun}
         onRow={
   
              (record, index) => {
   
                  return {
   
                      onClick: _ => {
    this.zjq(record, index) }, // 点击行
                          };
              }}
 />

我们在zjq这个函数中能获取到当前点击的行内容和行下标；

    zjq = (rowItem, index) => {
   
        console.log("LiuQing")
        this.setState({
   
            index
        })
    }

我们在状态机中存储一下index，用于判断哪个下标显示突出的背景颜色

    state={
   
        index:""
    }

rowClassName
下面就该说table的另一个属性了行类名rowClassName，这个属性对应的也是一个函数，这个函数的默认两个参数同样是当前行内容和当前行下标，返回值为string也就是我们的类名即可。
我们可以使用index完美的得到哪一行被点击了

    rowClassName={
   this.rowClassNameFun}

    rowClassNameFun = (record, index) => {
   
        console.log(record, index, "rowClassNameFun")
        if (index === this.state.index)
            return 'mySelfClassName'
    }

最后就是引入样式文件

    import './index.less'

    .mySelfClassName{
   
        background-color: red;
    }