在 Ant Design pro 中动态更改按钮颜色 table

Question

我正在使用ant design pro生成一个table。现在我想在一列中实现按钮并根据值更改按钮的颜色。但是我正在努力如何实现它。

与图片相似。当 false 时，我可以使用 danger 创建一个红色按钮。但是如何根据单元格值禁用危险。

我的代码-->

const columns = [
{
  title: 'News Reported',
  dataIndex: 'newsReported',
  hideInForm: true,
  hideInSearch:true,
  sorter: true,
},
{
  title: 'Trustworthy',
  dataIndex: 'trustworthy',
  hideInForm: true,
  sorter: true,
  valueEnum: {
    0: {
      text: 'False',
      status: 'False',
    },
    1: {
      text: 'True',
      status: 'True',
    },
  },
  render: (_) => (
      <Button
        type="primary" danger
        onClick={() => {
          console.log("Option Clicked",_)
        }}
      >
        {_}
      </Button>
  ),
},
]

  return (
<PageHeaderWrapper>
  <ProTable
    rowKey="key"
    actionRef={actionRef}
    request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
    columns={columns}
    rowSelection={false}
    scroll={{ x: 700 }}
  />


</PageHeaderWrapper>
);

如果我可以根据单元格值将 danger 设置为 false，我就可以实现我的目标。但是我该怎么做呢？

提前致谢。

Answer 1

如果您的列值为布尔值，则可以使用以下内容：

render: (value) => (
  <Button
    type="primary" danger={value}
    onClick={() => {
      console.log("Option Clicked",_)
    }}
  >
    {value}
  </Button> ),

Answer 2

所以，找到问题了。当我使用值枚举时，在渲染中传递参数时它采用枚举的文本值。发现 render 有另一个参数 record，它有行值。使用它我可以获得我想要的输出。这是最好的方法吗，我不知道。所以工作代码现在适合我 -->

render: (_,record) => (
    <Button
      type="primary" danger={!record.status}
      onClick={() => {
        console.log("Option Clicked",_,record.status)
      }}
    >
      {_}
    </Button>
  ),

在 Ant Design pro 中动态更改按钮颜色 table

Change Button Color Dynamically in Ant Design pro table

javascript

reactjs

antd

ant-design-pro