antd Table对满足条件的单元格设置背景色

最新推荐文章于 2025-03-19 16:27:58 发布

原创最新推荐文章于 2025-03-19 16:27:58 发布 · 5.8k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ant #Table #onCell

收录于

React 同时被 2 个专栏收录

5 篇文章

订阅专栏

Ant-design

3 篇文章

订阅专栏

本文介绍如何使用Ant Design的Table组件，通过onCell属性来动态设置表格中满足特定条件的单元格背景颜色，实现数据展示的个性化定制。

index.css: 
	.cell-class {
	  background-color: red;
	}

import './index.css'
const column: Array<any> = {
    title: "Age",
    width: 100,
    dataIndex: "age",
    key: "age",
    fixed: "left",
    onCell: (record, index) => {
      console.log("record, index: ", record, index);
      // 单元格背景色添加过滤条件
      if (record.age >= 32 && index % 2 === 0) {
        return { className: "cell-class" };
      }
      return { className: "" };
}