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

今天项目中有一个需求,点击某一行后,将改行的背景颜色换掉,换成一个比较醒目的颜色。
首先看了看官方,官方还是比较可爱可亲的,都给我们准备好了,
antd中table组件选中单行换样式(比如背景颜色)_第1张图片

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;
	}

antd中table组件选中单行换样式(比如背景颜色)_第2张图片

你可能感兴趣的:(#,react,javascript,react,antd,table,选中行)