Ant Design中的表格组件的rowClassName的使用
需求:根据表格某一行中的某一个字段的值来判断当前行背景是否变色。
实现此需求需要用到表格的rowClassName这个API,如下:
首先解释一下 Function(record, index):string 这个函数是什么意思:
record表示当前行的数据,index表示当前行是第几行
使用方法:
1、创建css,期望表格行变成什么样式,例如:
//背景色变为红色
.ant-table-striped :deep(.table-striped) td {
background-color: red;
height: 50px;
}
//背景色默认白色
.ant-table-striped :deep(.table-striped1) td {
background-color: rgb(255, 255, 255);
height: 50px;
}
2、在表格组件中写代码,例如:
:rowClassName="(record, index) => (record.age <= 20 ? 'table-striped' : 'table-stripe1')"
为什么这样写呢,举个例子,如果表格的data数据如下:
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 20,
address: 'London No. 1 Lake Park',
}
刚才提到record就是表格的行,也就是这个:
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}
那么:rowClassName="(record, index) => (record.age <= 20 ? 'table-striped' : 'table-stripe1')"的意思就是:当前行的age如果小于20,那么背景色为红色,否则为默认,以此来达到改变行的背景色的目的。
希望对各位有所帮助。