vue3+antd/arcod实现列表中每一行根据不同数据添加不同的样式

前言：

        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" 
...

api：

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" 
...

api:

rowClassName

表格行的类名

Function(record, index):string

-