在 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) => (

  <Button

    type="primary" danger={value}

    onClick={() => {

      console.log("Option Clicked",_)

    }}

  >

    {value}

  </Button> ),

Answer 2

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

render: (_,record) => (

    <Button

      type="primary" danger={!record.status}

      onClick={() => {

        console.log("Option Clicked",_,record.status)

      }}

    >

      {_}

    </Button>

  ),