В версии 1.2.1 семантической таблицы UI React я не могу найти никакого собственного поведения для отображения или скрытия столбцов в: https://react.semantic-ui.com/collections/table/# типы-пагинация

И на самом деле я не использую столбцы, а только строки, как в первом примере:

<Table celled>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Label ribbon>First</Label>
        </Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
    </Table.Body>
</Table>

Мне просто нужно использовать стандартный html css display none? Я бы подумал, что в таблицу будут встроены какие-то свойства?

0
blomster 14 Сен 2020 в 09:01

1 ответ

Лучший ответ

В ответ вы можете сделать это с помощью управления состоянием.

Примере:

  1. В конструкторе создайте

    this.state = {hide: true}

В таблице, если вы хотите скрыть строку таблицы,

Напишите так:

{
(this.state.hide==false)?null:<Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
    </Table.Body>
}

Эта строка не будет отображаться. Это потому, что рендеринг реакции основан на состоянии.

Если вы хотите скрыть, вам нужно установить состояние как hide = true, т.е.

this.setState({hide:true})
0
Aijaz Ali Gopang 14 Сен 2020 в 06:09