antd 中table上加不同字体颜色_业务中条件渲染的另一种玩法

可以通过自定义 render 函数来实现在 antd table 中加入不同的字体颜色。具体实现方法如下：

1. 在 columns 中，对需要不同颜色的字段设置 render 函数，例如：

{
  title: '状态',
  dataIndex: 'status',
  render: (text, record) => {
    const color = record.status === '已完成' ? 'green' : 'red';
    return <span style={{ color }}>{text}</span>;
  },
},

2. 在 render 函数中，根据业务需求设置不同颜色的样式，例如：

const color = record.status === '已完成' ? 'green' : 'red';
return <span style={{ color }}>{text}</span>;

这里根据 status 字段的值，设置不同的颜色样式。

这种方法可以灵活地根据业务需求设置不同颜色的样式。

相关问题

antd中table更换颜色

Antd中的Table 表格组件提供了很多基本颜色和风格，但是如果我们想要更改或者自定义一些颜色的话，可以通过CSS 或者自定义主题来实现。

一、通过CSS自定义

我们可以通过定义一些CSS 样式类，然后通过 className 属性绑定到表格中的相应元素上来自定义表格的颜色和样式，以下为一个例子：

/* 表格Header 的自定义样式 */
.custom-header {
  background-color: #1890ff;
  color: #fff;
}

/* 表格行的自定义样式 */
.custom-row {
  background-color: #f0f2f5;
}

/* 表格奇数行自定义样式 */
.custom-row-odd {
  background-color: #fff;
}

/* 表格偶数行自定义样式 */
.custom-row-even {
  background-color: #fafafa;
}

我们可以通过 className 属性绑定到相应的表格元素上：

<Table
  columns={columns}
  dataSource={dataSource}
  rowKey="id"
  pagination={false}
  className="custom-table"
  components={{
    header: {
      cell: ResizeableTitle
    }
  }}
  onRow={(record, index) => ({
    className: index % 2 === 0 ? 'custom-row-even' : 'custom-row-odd'
  })}
  />

二、通过Antd 自定义主题

如果需要更改默认的 Antd 风格和颜色，我们可以通过覆盖 Antd 默认的 LESS 变量来达到自定义主题的目的，以下为例子：

@import "~antd/dist/antd.less";  // 导入 Antd 的 LESS 样式库

@primary-color: #1890ff;  // 更改主题颜色

@table-header-bg: #1890ff;   // 更改表格头部的背景色
@table-row-hover-bg: #f5f5f5;  // 更改表格行悬浮时的背景色

在实际开发中，我们可以根据需要来进行自定义主题的配置，然后在项目中引入自定义主题的 LESS 文件，让样式生效。

以上就是在 Antd 中更换表格颜色的两种常用方法，具体方法可以根据项目的实际需求来选择。

React笔记 Antd中table组件的render方法重新渲染失效了怎么解决

当使用Antd中的Table组件时，如果使用了render方法自定义单元格的渲染方式，但是在修改数据后发现重新渲染失效，可能是因为Antd的Table组件实现了shouldComponentUpdate方法，对性能进行了优化，如果默认的判断逻辑认为组件不需要重新渲染，则不会执行render方法。因此，我们需要手动实现shouldComponentUpdate方法，对渲染逻辑进行控制。

具体来说，我们可以通过继承Antd的Table组件，并实现shouldComponentUpdate方法来控制渲染。例如：

class MyTable extends Table {
  shouldComponentUpdate(nextProps) {
    // 在这里编写自定义的判断逻辑
    // 如果需要重新渲染，则返回true
    // 否则返回false
    return true;
  }
}

在上面的例子中，我们继承了Antd的Table组件，并重写了shouldComponentUpdate方法。在方法中，我们可以根据需要重新渲染的条件来返回true或false。如果返回true，则会执行render方法重新渲染组件；如果返回false，则不会重新渲染。通过这种方式，我们可以手动控制渲染逻辑，解决重新渲染失效的问题。