本文介绍在动态生成 html 表格时，当第二列（itemb）存在多行子项而第一列（itema）为单值时，如何仅在首行显示 itema 值、其余行留空，从而实现语义清晰、结构紧凑的垂直对齐效果。
在实际前端开发中（例如 Highcharts 自定义 tooltip、React/Vue 动态表格渲染等场景），我们常需将一对多关系的数据以表格形式展示。典型需求是：ItemA = ["Color", "Fruit", "Nuts"] 与 ItemB = [["green"], ["orange", "apple", "grapes"], []] 对应，期望呈现为「Color–green」「Fruit–orange」「 –apple」「 –grapes」「Nuts–」，即 ItemA 仅在其对应的第一条 ItemB 子项所在行显示，后续子项行中该单元格留空——这既符合阅读直觉，也避免冗余重复。
核心思路是：在遍历 ItemB[i] 的内层循环中，通过索引 j 判断是否为首个子项（j === 0），若是则渲染 ItemA[i]，否则渲染空字符串。
以下是优化后的完整代码实现（已适配原上下文中的 this.point.customTT === 'Item' 条件）：
if (this.point.customTT === 'Item') {
let tableBody = '';
itemA.forEach((name1, i) => {
if (Array.isArray(itemB[i]) && itemB[i].length > 0) {
// ItemB[i] 存在且非空：首行显示 ItemA，其余行留空
itemB[i].forEach((name2, j) => {
tableBody += `
<tr>
<td>${j === 0 ? name1 : ''}</td>
<td>${name2}</td>
</tr>
`;
});
} else {
// ItemB[i] 为空或不存在：单独一行，ItemA 显示，ItemB 留空
tableBody += `
<tr>
<td>${name1}</td>
<td></td>
</tr>
`;
}
});
const html = `
<table style="border-collapse: collapse; font-size: 14px;">
<thead>
<tr>
<th style="border: 1px solid #ccc; padding: 6px 8px; text-align: left;">ItemA</th>
<th style="border: 1px solid #ccc; padding: 6px 8px; text-align: left;">ItemB</th>
</tr>
</thead>
<tbody>
${tableBody}
</tbody>
</table>
`;
return html;
}✅ 关键要点说明：
- 使用 j === 0 精准控制仅首行渲染 itemA[i]，逻辑简洁可靠；
- 增加 Array.isArray(itemB[i]) && itemB[i].length > 0 安全判断，防止因 itemB[i] 为 undefined 或空数组导致报错；
- 表格添加内联样式（如 border-collapse, padding）提升可读性，可根据主题灵活调整；
- 若需支持跨浏览器兼容性（如旧版 IE），避免使用模板字符串中的换行缩进，或改用字符串拼接。
? 延伸建议：
若后续需支持「ItemA 跨多行合并单元格（rowspan）」的更高级布局，可预先计算每组 itemB[i] 长度，动态生成 <td rowspan="${itemB[i].length}">，但需注意空数组/缺失项的边界处理。当前方案在简洁性、可维护性与视觉效果间取得了最佳平衡。
