Выберите только одну строку в компоненте таблицы ant-design - PullRequest
Новая
       27

Выберите только одну строку в компоненте таблицы ant-design

1 голос
/ 24 мая 2019

У меня тут проблема. Для моего проекта обязательно пользовательский муравей дизайн. Ссылка здесь: https://ant.design/components/table Компонент, который я должен использовать, является компонентом таблицы. Когда я нажимаю на строку, я должен отправить действие. Проблема, с которой я сталкиваюсь, заключается в том, что я должен проверить только одну строку. В результате, когда я нажимаю на строку, флажок в предыдущей строке должен быть снят.

Я попытался добавить логику, как вы можете видеть здесь: 

class EvaluationDataTable extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
  };

  onSelectChange = selectedRowKeys => {
    if (selectedRowKeys.length > 1) {
      const lastSelectedRowIndex = [...selectedRowKeys].pop();
      this.setState({ selectedRowKeys: lastSelectedRowIndex });
    }
    this.setState({ selectedRowKeys });
    console.log('selectedRowKeys changed: ', selectedRowKeys);
  };

  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <React.Fragment>
        <div style={{ marginBottom: 16 }} />
        <Table
          rowSelection={rowSelection}
          columns={columnEvaluation}
          dataSource={result}
        />
      </React.Fragment>
    );
  }
}```

But even if the selectedRow has the last checked row the no checkbox is checked. Any ideas?

1 Ответ

1 голос
/ 24 мая 2019

Похоже, что вы можете настроить таблицу ant ant для использования переключателей вместо флажков. Поскольку переключатели предназначены для одного выбора, это должно решить ваш вариант использования. Документы указывают, что компонент таблицы antd имеет rowSelection prop, который принимает объект конфигурации, определенный здесь . Один из вариантов - type, который можно установить на radio или checkbox. Вы хотите radio. Итак, вы хотите что-то вроде: 

<Table rowSelection={{type:'radio'}} >...</Table>
...