我在使用材料 ui 表时有一个偏移量,有什么问题?

问题描述

我在使用 material ui table 时遇到问题,每次我有这种奇怪的行为并且不知道如何解决它时,尝试了许多解决方案并为单元格设置样式但从未修复。

我注意到,当我添加显示在表格中的数据时,这种情况经常发生。

谢谢

this is what i have when adding values in the table

这是我代码的一部分

<TableBody>
          <StyledTableRow>
            <TableCellTitle />
            {renderYears1()
              .slice(0,1)
              .map((year) =>
                year.map((y) => (
                  <StyledTableCell>
                    {y.map((yr) => (
                      <StyledTableCellStrong>{yr}</StyledTableCellStrong>
                    ))}
                  </StyledTableCell>
                ))
              )}
          </StyledTableRow>
          {dataTestingObj.map((data) => (
            <StyledTableRow>
              <TableCellTitle>{data.company}</TableCellTitle>
              {Object.values(data)
                .slice(0,5)
                .map((val) => (
                  <StyledTableCell>
                    {Object.values(val.values).map((vl) => (
                      <StyledTableCell>
                        {parseFloat(vl).toFixed(2)}
                      </StyledTableCell>
                    ))}
                  </StyledTableCell>
                ))}
            </StyledTableRow>
          ))}
          <StyledTableRowStrong>
            <TableCellTitleStrong>Total Average</TableCellTitleStrong>    
              {arrayByMetrics.length > 0 &&
                arrayByMetrics.map((val) => (
                <StyledTableCell>
                  <StyledTableCellStrong>
                    {parseFloat(val).toFixed(2)}%
                  </StyledTableCellStrong>
                </StyledTableCell>
                ))}     
          </StyledTableRowStrong>
          <TableRow>
            <TableCellTitle>Issuer</TableCellTitle>
            <StyledTableCell>
              {revenueCagr[4].map((val) => (
                <StyledTableCell>{parseFloat(val).toFixed(2)}</StyledTableCell>
              ))}
            </StyledTableCell>
            <StyledTableCell>
              {revenueGrowth[4].map((val) => (
                <StyledTableCell>{parseFloat(val).toFixed(2)}</StyledTableCell>
              ))}
            </StyledTableCell>
            <StyledTableCell>
              {grossMargin[4].map((val) => (
                <StyledTableCell>{parseFloat(val).toFixed(2)}</StyledTableCell>
              ))}
            </StyledTableCell>
            <StyledTableCell>
              {ebitdamargin[4].map((val) => (
                <StyledTableCell>{parseFloat(val).toFixed(2)}</StyledTableCell>
              ))}
            </StyledTableCell>
            <StyledTableCell>
              {ebitaMargin[4].map((val) => (
                <StyledTableCell>{parseFloat(val).toFixed(2)}</StyledTableCell>
              ))}
            </StyledTableCell>
          </TableRow>
        </TableBody>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)