ant design 实现表格选中行背景色改变

ant design 实现表格选中行背景色改变

平时开发过程中，经常遇到一个页面上有两个表格，构成头行表的情况，例如：

antdesign的Table组件中默认只有鼠标移入行背景色改变效果，而在头行表展示的时候，我们点击头表的某行数据，行表进行关联展示，操作完行表之后，我们会发现我们已无法分辨刚刚我们点击了头行的哪条数据，所以，我们需要实现：点击头表的一条数据，该条数据背景色变深，即使移出鼠标，该行背景色仍然变深。

1.样式global.less

在global.less中新加一个我们自定义的样式，这样所有需要该效果的页面引入global.less即可使用该样式，并且方便我们之后统一修改该背景色：

// 被选中的表格行的样式
.clickRowStyl {
  background-color : #cbf2ff
}

2.初始化头表选中信息存储

在页面的构造方法中初始化state，初始化一个属性用于存储我们点击了头表的哪一行。注意这是一个{}，而不是[]。

constructor(props){
        super(props);
        this.state = {
            hrpFactSelectedRowData : {},  //点击选中的事实表信息，头表信息
        };
 }

3.实现点击头表将行信息存储到state中

定义头表的行点击事件：

//头表行点击事件
onclickFact = (record) => {
        this.setState({hrpFactSelectedRowData : record}, ()=>{//这里可以做查询行表的操作}); 
}

将行点击事件绑定在Table组件上

 {    //行点击事件
				return{
					onClick: (event) => this.onclickFact(record)
				}
			}}>

4.实现头表行样式根据点击记录动态改变

引入global.less:(这个地方估计是能不引入就能用，现在还没研究出来)

import global from '@/global.less'

定义动态返回样式方法：这个方法传入的是行数据，当state中存储的行数据(即我们刚刚点击了的行数据)和传入的行数据的id一致，则返回背景色加深的样式。

//根据是否被选中返回头表行的className
setSelectHrpFactRowClassName = (record) => {
       return record.id === this.state.hrpFactSelectedRowData.id? global.clickRowStyl : '';
}

将动态行样式方法绑定到Table组件上

 {    //行点击事件
				return{
	                onClick: (event) => this.onclickFact(record)
                }
             }}
            rowClassName={this.setSelectHrpFactRowClassName}>	//动态行样式方法

5.效果

这样我们就可以实现，点击表格的某一行，该行的颜色背景色变深，即使鼠标移开，也保留变深效果。

6.备注

• 点击头表将行信息存储到state中完全可以只保存行数据的id：
  我们state中保存的实际上是我们刚刚点击的这一行整行的数据，其实完全可以只保存该行的id，因为动态返回样式方法setSelectHrpFactRowClassName 中判断该行是不刚刚点击的行仅使用了id进行判断。因为我这里刚刚点击的整行的数据还有其他用处，所以就保存了整行的数据。
• global.less中的样式名称保持一致：
  在global.less中自定义的颜色变深的样式的名称，多人开发时要保持一致，这样便于后期修改和优化，其余的行点击事件方法、动态返回样式方法等可以根据各个页面的具体意义自定义即可。