如何在Ant Design Table中根据status字段条件渲染Badge

问题根源 #

你的代码存在两个关键问题：

1. render 函数没有接收当前行的字段值，导致无法获取每行的 status 进行判断
2. 先定义了 tableColumns 再定义 columns，此时 columns 还未初始化，tableColumns 会基于空值生成，导致表格列配置失效

解决步骤及修正代码 #

调整代码顺序，并给 render 函数传入当前行的字段值：

// 先定义表格列配置
const columns = [
  {
    title: 'Статус',
    dataIndex: 'status',
    // render函数第一个参数就是当前行status字段的值，直接用它做判断
    render: (status) => {
      return status === "in progress" 
        ? <Badge status="processing" text="in progress" /> 
        : <Badge status="success" text="delivered" />;
    }
  },
  // 其他列配置...
];

// 再基于columns生成带ellipsis的tableColumns
const tableColumns = columns.map((item) => ({
  ...item,
  ellipsis,
}));

// Table组件使用正确的配置
<Table
  {...tableProps}
  pagination={{
    position: ['top', 'bottom'],
  }}
  columns={tableColumns}
  dataSource={hasData ? data : []}
  scroll={scroll}
/>

补充说明 #

• 如果需要用到当前行的其他字段，可以给 render 函数传入第二个参数（整行数据对象）：

  render: (status, record) => {
    // record就是当前行的完整数据，可访问record.xxx获取其他字段
    return status === "in progress" 
      ? <Badge status="processing" text="in progress" /> 
      : <Badge status="success" text="delivered" />;
  }
  

内容的提问来源于stack exchange，提问作者Yoqubxon Xamidoff