Angular实现带横竖表头的6×5表格问题咨询

数据与表格结构映射 #

先明确数据和表格的对应关系（匹配6×5的结构）：

• 表格共6行：1行横向表头 + 5行数据行
• 表格共5列：1列纵向表头 + 4列数据列
• 横向表头：取自每个因素（ListaCzynnikow）的水平项（PoziomCzynnika）的etykieta（假设所有因素的水平数量一致，这里设为4个）
• 纵向表头：每个ListaCzynnikow的nazwa（共5个，对应5行数据）
• 单元格内容：对应因素对应水平的wartosc

示例数据构造 #

先模拟符合结构的测试数据：

// 定义类型
type PoziomCzynnika = {
  poziom: string;
  etykieta: string;
  wartosc: string;
};

type ListaCzynnikow = {
  nazwa: string;
  waga: number;
  poziomyCzynnika: PoziomCzynnika[];
};

// 示例数据（5个因素，每个4个水平，正好匹配6×5表格）
const factors: ListaCzynnikow[] = [
  {
    nazwa: "因素A",
    waga: 0.2,
    poziomyCzynnika: [
      { poziom: "1", etykieta: "低", wartosc: "10" },
      { poziom: "2", etykieta: "中", wartosc: "20" },
      { poziom: "3", etykieta: "高", wartosc: "30" },
      { poziom: "4", etykieta: "极高", wartosc: "40" }
    ]
  },
  {
    nazwa: "因素B",
    waga: 0.3,
    poziomyCzynnika: [
      { poziom: "1", etykieta: "少", wartosc: "5" },
      { poziom: "2", etykieta: "中", wartosc: "15" },
      { poziom: "3", etykieta: "多", wartosc: "25" },
      { poziom: "4", etykieta: "极多", wartosc: "35" }
    ]
  },
  {
    nazwa: "因素C",
    waga: 0.15,
    poziomyCzynnika: [
      { poziom: "1", etykieta: "慢", wartosc: "8" },
      { poziom: "2", etykieta: "中速", wartosc: "16" },
      { poziom: "3", etykieta: "快", wartosc: "24" },
      { poziom: "4", etykieta: "极速", wartosc: "32" }
    ]
  },
  {
    nazwa: "因素D",
    waga: 0.25,
    poziomyCzynnika: [
      { poziom: "1", etykieta: "差", wartosc: "3" },
      { poziom: "2", etykieta: "一般", wartosc: "12" },
      { poziom: "3", etykieta: "好", wartosc: "21" },
      { poziom: "4", etykieta: "优秀", wartosc: "30" }
    ]
  },
  {
    nazwa: "因素E",
    waga: 0.1,
    poziomyCzynnika: [
      { poziom: "1", etykieta: "小", wartosc: "2" },
      { poziom: "2", etykieta: "中", wartosc: "10" },
      { poziom: "3", etykieta: "大", wartosc: "18" },
      { poziom: "4", etykieta: "极大", wartosc: "26" }
    ]
  }
];

原生HTML+JavaScript实现 #

直接生成表格DOM并渲染：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>双表头表格</title>
  <style>
    table {
      border-collapse: collapse;
      width: 80%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }
    th {
      background-color: #f2f2f2;
      font-weight: bold;
    }
    .vertical-header {
      background-color: #e8f4f8;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="table-container"></div>

  <script>
    // 上面的类型定义和示例数据 factors 放在这里

    const container = document.getElementById('table-container');
    const table = document.createElement('table');

    // 创建横向表头行
    const headerRow = document.createElement('tr');
    // 第一个单元格空白（双表头交叉位置）
    const emptyTh = document.createElement('th');
    headerRow.appendChild(emptyTh);
    // 添加水平表头（取自第一个因素的etykieta）
    factors[0].poziomyCzynnika.forEach(level => {
      const th = document.createElement('th');
      th.textContent = level.etykieta;
      headerRow.appendChild(th);
    });
    table.appendChild(headerRow);

    // 创建数据行（含纵向表头）
    factors.forEach(factor => {
      const row = document.createElement('tr');
      // 纵向表头单元格
      const verticalHeader = document.createElement('td');
      verticalHeader.textContent = factor.nazwa;
      verticalHeader.classList.add('vertical-header');
      row.appendChild(verticalHeader);
      // 添加对应水平的数值
      factor.poziomyCzynnika.forEach(level => {
        const td = document.createElement('td');
        td.textContent = level.wartosc;
        row.appendChild(td);
      });
      table.appendChild(row);
    });

    container.appendChild(table);
  </script>
</body>
</html>

React组件实现（可选） #

如果用React开发，组件化实现：

import React from 'react';

// 类型定义同前
type PoziomCzynnika = {
  poziom: string;
  etykieta: string;
  wartosc: string;
};

type ListaCzynnikow = {
  nazwa: string;
  waga: number;
  poziomyCzynnika: PoziomCzynnika[];
};

type DoubleHeaderTableProps = {
  factors: ListaCzynnikow[];
};

const DoubleHeaderTable: React.FC<DoubleHeaderTableProps> = ({ factors }) => {
  if (factors.length === 0 || factors[0].poziomyCzynnika.length === 0) {
    return <div>无数据</div>;
  }

  return (
    <table style={{ borderCollapse: 'collapse', width: '80%', margin: '20px auto' }}>
      <thead>
        <tr>
          <th style={{ border: '1px solid #ddd', padding: '8px' }}></th>
          {factors[0].poziomyCzynnika.map(level => (
            <th key={level.poziom} style={{ border: '1px solid #ddd', padding: '8px', backgroundColor: '#f2f2f2', fontWeight: 'bold' }}>
              {level.etykieta}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {factors.map(factor => (
          <tr key={factor.nazwa}>
            <td style={{ border: '1px solid #ddd', padding: '8px', backgroundColor: '#e8f4f8', fontWeight: 'bold' }}>
              {factor.nazwa}
            </td>
            {factor.poziomyCzynnika.map(level => (
              <td key={level.poziom} style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'center' }}>
                {level.wartosc}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

// 使用示例
const App = () => {
  // 示例数据 factors 同前
  return <DoubleHeaderTable factors={factors} />;
};

export default App;

关键注意点 #

• 确保所有ListaCzynnikow的poziomyCzynnika长度一致，否则表格会列数不齐
• 如果需要展示waga（权重），可以在纵向表头单元格里增加显示，比如${factor.nazwa} (权重: ${factor.waga})
• 样式可以根据需求调整，比如表头颜色、单元格宽度等

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