antd实现table组件选中单行换样式(比如背景颜色)
作者：六卿
这篇文章主要介绍了antd实现table组件选中单行换样式(比如背景颜色),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。