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 -

最近更新

  1. TCP协议是安全的吗?

    2024-02-01 02:34:02       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-01 02:34:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-01 02:34:02       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-01 02:34:02       20 阅读

热门阅读

  1. 第二题:1925B. A Balanced Problemset?

    2024-02-01 02:34:02       31 阅读
  2. 重发布

    重发布

    2024-02-01 02:34:02      34 阅读
  3. EVE-NG抓包时wireshark报错Connection abandoned解决方法

    2024-02-01 02:34:02       25 阅读
  4. 了解Unity文件夹和路径

    2024-02-01 02:34:02       36 阅读
  5. Leetcode--27

    2024-02-01 02:34:02       33 阅读
  6. 新概念英语第二册(47)

    2024-02-01 02:34:02       31 阅读
  7. Vue学习笔记之应用创建和基础知识

    2024-02-01 02:34:02       44 阅读
  8. docker 无法执行systemctl

    2024-02-01 02:34:02       36 阅读