Как скрыть / показать столбец на основе оператора if с использованием Material-ui? - PullRequest
Новая
       76

Как скрыть / показать столбец на основе оператора if с использованием Material-ui?

0 голосов
/ 30 апреля 2020

У меня есть следующий код, и я хочу скрыть или показать TableCell на основе оператора if, как мне это сделать?

Я использую MATERIAL-UI: https://material-ui.com/

  <TableBody>
                {Object.entries(servicesCode).map(([key, value]) => (
                  servicesValueTotal[key] = ((servicesValue[key] + servicesTaxe[key])),
                  <TableRow key={servicesCode[key]}>
                    <TableCell component="th" scope="row">
                      {key}
                    </TableCell>
                    <TableCell align="center" >{servicesCode[key]}</TableCell>
                    <TableCell align="center">{servicesValue[key]}</TableCell>
                    <TableCell align="center">{servicesTaxe[key]}</TableCell>
                    <TableCell align="center">{servicesValueTotal[key]}</TableCell>
                    <TableCell align="center">{servicesTec[key]}</TableCell>
                    <TableCell align="center">{servicesClient[key]}</TableCell>
                    <TableCell align="center">{servicesStatus[key]}</TableCell>
                  </TableRow>
                ))}
              </TableBody>

Ответы [ 2 ]

1 голос
/ 30 апреля 2020 
let showTableCell = (true) ? true : false; // you can have a single line condition or multiple line condition using if and else here.

 <TableBody>
                {Object.entries(servicesCode).map(([key, value]) => (
                  servicesValueTotal[key] = ((servicesValue[key] + servicesTaxe[key])),
                  <TableRow key={servicesCode[key]}>
                    <TableCell component="th" scope="row">
                      {key}
                    </TableCell>
                    {showTableCell && <TableCell align="center" >{servicesCode[key]}</TableCell>}
                    // or you could also add condition here as well
                    {showTableCell ? <TableCell align="center">{servicesValue[key]}</TableCell> : "Some other data here"}
                    <TableCell align="center">{servicesTaxe[key]}</TableCell>
                    <TableCell align="center">{servicesValueTotal[key]}</TableCell>
                    <TableCell align="center">{servicesTec[key]}</TableCell>
                    <TableCell align="center">{servicesClient[key]}</TableCell>
                    <TableCell align="center">{servicesStatus[key]}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
0 голосов
/ 30 апреля 2020

Почему бы не использовать функцию, называемую условным рендерингом?

{condition && <Component />}, например {condition && <TableCell align="center" >{servicesCode[key]}</TableCell>}

Примечание. Поскольку вы используете таблицу для отображения данных, она должна иметь фиксированный номер из th тегов - заголовки таблицы, поэтому полное удаление ячеек таблицы может быть плохим решением.

Вы также можете оставить пустую ячейку таблицы, исходя из условия, например <TableCell align="center" >{condition && servicesCode[key]}</TableCell> или <TableCell align="center" >{condition ? someVariable : "No data here"}</TableCell>

...