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

Question

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

和图片类似。当为假时，我可以使用危险来创建一个红色按钮。但是如何根据单元格值禁用危险。

我的代码-->

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>

);

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

提前致谢。

Answer 1

如果您的列值是布尔值，那么您可以使用以下内容：render: (value) => (&nbsp; <Button&nbsp; &nbsp; type="primary" danger={value}&nbsp; &nbsp; onClick={() => {&nbsp; &nbsp; &nbsp; console.log("Option Clicked",_)&nbsp; &nbsp; }}&nbsp; >&nbsp; &nbsp; {value}&nbsp; </Button> ),

Answer 2

于是，发现了问题。当我使用值枚举时，在渲染中传递参数时，它采用枚举的文本值。发现渲染有另一个record具有行值的参数。使用它我可以获得我想要的输出。这是最好的方法吗，我不知道。所以工作代码现在适合我 -->render: (_,record) => (&nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; type="primary" danger={!record.status}&nbsp; &nbsp; &nbsp; onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; console.log("Option Clicked",_,record.status)&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {_}&nbsp; &nbsp; </Button>&nbsp; ),