版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29668759/article/details/88943281
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组件上
<Table columns={factColumns} dataSource={this.props.FactList} rowKey="id"
bordered size="middle" scroll={{ y: 240 }}
rowSelection={factRowSelection}
onRow={(record) => { //行点击事件
return{
onClick: (event) => this.onclickFact(record)
}
}}>
</Table>
4.实现头表行样式根据点击记录动态改变
引入global.less:(这个地方估计是能不引入就能用,现在还没研究出来)
import global from '@/global.less'
定义动态返回样式方法:这个方法传入的是行数据,当state中存储的行数据(即我们刚刚点击了的行数据)和传入的行数据的id一致,则返回背景色加深的样式。
//根据是否被选中返回头表行的className
setSelectHrpFactRowClassName = (record) => {
return record.id === this.state.hrpFactSelectedRowData.id? global.clickRowStyl : '';
}
将动态行样式方法绑定到Table组件上
<Table columns={factColumns} dataSource={this.props.FactList} rowKey="id"
bordered size="middle" scroll={{ y: 240 }}
onRow={(record) => { //行点击事件
return{
onClick: (event) => this.onclickFact(record)
}
}}
rowClassName={this.setSelectHrpFactRowClassName}> //动态行样式方法
</Table>
5.效果
这样我们就可以实现,点击表格的某一行,该行的颜色背景色变深,即使鼠标移开,也保留变深效果。
6.备注
- 点击头表将行信息存储到state中完全可以只保存行数据的id:
我们state中保存的实际上是我们刚刚点击的这一行整行的数据,其实完全可以只保存该行的id,因为动态返回样式方法setSelectHrpFactRowClassName 中判断该行是不刚刚点击的行仅使用了id进行判断。因为我这里刚刚点击的整行的数据还有其他用处,所以就保存了整行的数据。 - global.less中的样式名称保持一致:
在global.less中自定义的颜色变深的样式的名称,多人开发时要保持一致,这样便于后期修改和优化,其余的行点击事件方法、动态返回样式方法等可以根据各个页面的具体意义自定义即可。