前言:
arco design/antd中实现一个需求,列表的每一行都要有自己不同的样式,根据不同的数据,下面分享实现这个效果的方法。
实现效果:
实现方法:
1、arco design
1)定义方法
const rowClassName = (record, index) =>{
let className = '';
if (record?.status === 11) {
className = 'firstJoinClass';
}else if(record?.status === 21){
className = 'mrJoinClass';
}
return className;
}
2)列表中添加
<a-table :row-class="rowClassName"
...
row-class |
表格行元素的类名。2.34.0 版本增加函数值支持 |
string| any[]| Record<string, any>| ((record: TableData, rowIndex: number) => any) |
- |
2.16.0 |
2、antd
1)定义方法
const rowClassName = (record, index) =>{
let className = '';
if (record?.status === 11) {
className = 'firstJoinClass';
}else if(record?.status === 21){
className = 'mrJoinClass';
}
return className;
}
2)列表中添加
<a-table :rowClassName="rowClassName"
...
rowClassName |
表格行的类名 |
Function(record, index):string |
- |