如何基于列配置动态在表格指定列展示行数据？

首先修正你代码里的语法错误：rows数组中的对象之间缺少逗号，这会导致JS解析报错。

要实现将每行数据展示在第三、第四列，核心思路是：前两列渲染空单元格，第三、第四列填充行数据，同时保证和表头的列数对应。

完整实现代码 #

const columns = [
  {id: 1, one: "one", two: "two", three: "three", four: "four"}
];

const rows = [
  {id: 1, title: "dog", age: "2", name: "Buzzy"},
  {id: 2, item: "laptop", data: "something", year: "1980"}
];

<table border="1">
  <thead>
    {columns.map((data) => (
      <tr key={data.id}>
        {/* 过滤掉id字段，只渲染列名 */}
        {Object.entries(data).filter(([key]) => key !== 'id').map(([key, value]) => (
          <th key={key}>{value}</th>
        ))}
      </tr>
    ))}
  </thead>
  <tbody>
    {rows.map((row) => {
      // 提取行数据中除id外的前两个值，用于填充第三、第四列
      const targetValues = Object.values(row).slice(1).slice(0, 2);
      return (
        <tr key={row.id}>
          {/* 前两列渲染空单元格 */}
          <td></td>
          <td></td>
          {/* 填充第三、第四列 */}
          {targetValues.map((val, idx) => (
            <td key={`${row.id}-col-${idx+3}`}>{val}</td>
          ))}
        </tr>
      );
    })}
  </tbody>
</table>

说明 #

1. 表头优化：过滤掉columns中的id字段，避免渲染多余的表头列。
2. 空列处理：每个行开头渲染两个空<td>，对应表头的one和two列。
3. 数据截取：从行数据中排除id，并只取前两个值填充到第三、第四列，避免数据超出列数。

如果需要精准指定行数据的字段对应第三、第四列（比如固定用title/item对应第三列，age/data对应第四列），可以修改targetValues的获取逻辑：

const targetValues = [row.title || row.item, row.age || row.data];

内容的提问来源于stack exchange，提问作者Emm