react antd 中 table 不同状态显示不同样式

原创于 2024-03-26 19:21:29 发布 · 431 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

React 专栏收录该内容

21 篇文章

订阅专栏

文章描述了一个表格列的渲染逻辑，使用`Badge`组件根据`status`值展示不同的状态指示，包括成功、处理中、警告和异常

表格columns中的代码

[
  {
    title: '状态',
    dataIndex: 'status',
    render: (_, record) => {
      let badge: any = '';
      if (record.status === 'success') {
        badge = <Badge status="success" text="成功" />;
      } else if (record.status === 'processing') {
        badge = <Badge status="processing" text="处理中" />;
      } else if (record.status === 'warning') {
        badge = <Badge status="warning" text="警告" />;
      } else {
        badge = <Badge status="error" text="异常" />;
      }
      return <>{badge}</>;
    },
  },
]