Динамическое изменение цвета кнопки в таблице Ant Design pro - PullRequest
Новая
       91

Динамическое изменение цвета кнопки в таблице Ant Design pro

0 голосов
/ 13 июля 2020

Я использую 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>
);

Если бы я каким-либо образом мог установить опасность в false в зависимости от значения ячейки, я мог бы достичь своей цели. Но как я могу это сделать?

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 13 июля 2020

Если значение вашего столбца является логическим, вы можете использовать следующее: 

render: (value) => (
  <Button
    type="primary" danger={value}
    onClick={() => {
      console.log("Option Clicked",_)
    }}
  >
    {value}
  </Button> ),
0 голосов
/ 13 июля 2020

Итак, нашел проблему. Поскольку я использую значение enum, при передаче параметра в рендере принималось текстовое значение enum. У обнаруженного рендера есть еще один параметр record, который имеет значения строки. Используя это, я могу получить желаемый результат. Это лучший способ, я не знаю. Итак, рабочий код теперь для меня -> 

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