antd table react 隔行换色根据某单元格的内容改变颜色

最新推荐文章于 2024-08-29 09:26:43 发布

方甘

最新推荐文章于 2024-08-29 09:26:43 发布

阅读量2k

点赞数

文章标签： react

本文链接：https://blog.csdn.net/weixin_43705236/article/details/124468467

版权

1.隔行换色

<Table
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{ y: 200 }}
              rowClassName={
                (record, index) => {
                  let className = ''
                  className = index % 2 ===0 ? 'ou' : 'ji'
                  // console.log(className)
                  return className
                }
              }
 ></Table>

.ou {
    background: transparent;
  }
  .ji {
    //background: rgba(222, 245, 255, 0.65);
    background: rgba(28, 85, 109, 0.65);
  }

2.根据某单元格内容改变字体颜色

const columns = [
    {
      title: '区域',
      dataIndex: 'area',
      key: 'area',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      render: (text: string) => {
        if(text === '待巡查') {
          return <span style={{color: 'rgb(121, 232, 161'}}>{text}</span>
        } else {
          return <span style={{color: 'white'}}>{text}</span>
        }
      }
    },
    {
      title: '巡查人',
      dataIndex: 'people',
      key: 'people',
    },
  ];