主页 / coding / 问题 / 79216917
Accepted
RobertW
Asked: 2024-11-23 08:43:45 +0800 CST

在自定义表组件中设置单个列的宽度

  • 772

我正在用 React 构建自己的Table组件。进展很顺利，但我遇到了一个障碍。

我的方法是传入一个模板对象，该对象由列定义数组以及表示要显示的数据的对象数组组成。由于Table必须是通用的，因此列数和行数在每种情况下都可能有所不同。

为了设置样式，我选择使用display: grid。这种方法效果很好，只是我现在不知道如何明确设置给定列的宽度。换句话说，在渲染时，我希望能够明确设置列的宽度。

这是我的基本 SCSS 布局代码：

.main {
  width: 100%;

  header {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    
    div {
      padding: 5px;
      margin-left: unset;
    }
  }

  .table {
    .row {
      display: grid;
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
      height: fit-content;
      align-items: center;
      
      .cell {
        padding: 2px 5px;
      }
    }
  } 
}

我的反应代码如下：

  return (
    <div className={styles.main} style={style}>
      <header>
        {getTemplateColumns().map(item => <div style={{ width: '75px' }}>{getHeaderCell(item)}</div>)}
      </header>

      <div className={styles.table}>
        {rows.map((row, rowIdx) => {
          return (
            <div className={styles.row}>
              {getTemplateColumns().map(item => 
                <div className={styles.cell} style={{ width: '75px' }}>
                  {getTableCell(item, rowIdx)}
                </div>)
              }
            </div>
          )
        })}
      </div>
    </div>
  );

您可以在上面的代码中看到，我正在尝试明确设置列的宽度，但没有效果。我认为这是因为布局grid不允许这样做。

有没有办法做到这一点，还是我应该采用老式的方法，而是实现table、、tr等td，这样我就可以完全控制列宽？

reactjs

1 个回答

  1. Best Answer

    在您的代码中，您在每个单元格上设置了 style={{ width: '75px' }}，但这不会影响整体网格布局。网格的 grid-auto-columns 和 grid-template-columns 属性控制列大小，因此网格内各个 div 元素的宽度不会覆盖网格的行为。

    要明确设置列宽，应在父容器（标题和 .table .row）上使用 grid-template-columns。这可确保网格在标题和表格行中一致地定义列宽。

    使用 grid-template-columns 设置列宽：这允许每列具有定义的宽度（例如 75px）。将其应用于标题和行：确保两个区域使用相同的网格模板来正确对齐列。

    header, .table .row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); /* Sets column width to 75px */
  gap: 5px; /* Optional: Adjusts spacing between columns */
}


<header style={{ gridTemplateColumns: getTemplateColumns().map(() => '75px').join(' ') }}>
  {getTemplateColumns().map(item => <div>{getHeaderCell(item)}</div>)}
</header>

<div className={styles.table}>
  {rows.map((row, rowIdx) => (
    <div className={styles.row} style={{ gridTemplateColumns: getTemplateColumns().map(() => '75px').join(' ') }}>
      {getTemplateColumns().map(item => 
        <div className={styles.cell}>
          {getTableCell(item, rowIdx)}
        </div>
      )}
    </div>
  ))}
</div>
    • 1

相关问题