我要评论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;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论