如何在ItemB多行显示时避免重复展示ItemA内容

需求 #

当ItemB存在多行内容时，仅在对应组的首行显示ItemA数据，后续行跳过重复显示。

给定数据：

ItemA = ["Color Fruit", "Nuts"]
ItemB = [["green"], ["orange", "apple", "grapes"], ["cashew", "almond"]]

现有代码 #

if (this.point.customTT === 'Item') {
    let tableBody = '';
    itemA.forEach((name1, i) => {
    itemB[i].forEach((name2, j) => {

      tableBody += `
          <tr>
            <td >${itemA[i]}</td>
            <td >${itemB[i][j]}</td>
          </tr>
     `

   })
   })

   const html = `
      <table>
      <thead>
      <tr>
          <th>ItemA</th>
          <th>ItemB</th>
      </tr>
      </thead>
      <tbody>               
      ${tableBody}
      </tbody>
  </table>
 `
 return html;
}

当前问题 #

当前代码生成的表格中，ItemA会随ItemB的每一行重复渲染：

ItemA   ItemB

Color   Green
Fruit   Orange
Fruit   Apple
Fruit   Grapes
Nuts    
   

期望效果 #

ItemB多行时，ItemA仅在对应组的首行显示：

ItemA   ItemB

Color   Green
Fruit   Orange
        Apple
        Grapes
Nuts    

修改后的代码 #

if (this.point.customTT === 'Item') {
    let tableBody = '';
    itemA.forEach((name1, i) => {
        itemB[i].forEach((name2, j) => {
            // 仅在当前ItemB组的第一行显示ItemA内容，其余行留空
            const itemAContent = j === 0 ? itemA[i] : '';
            tableBody += `
                <tr>
                    <td>${itemAContent}</td>
                    <td>${itemB[i][j]}</td>
                </tr>
            `;
        });
    });

    const html = `
        <table>
            <thead>
                <tr>
                    <th>ItemA</th>
                    <th>ItemB</th>
                </tr>
            </thead>
            <tbody>               
                ${tableBody}
            </tbody>
        </table>
    `;
    return html;
}

关键修改说明 #

• 新增判断逻辑：通过j === 0识别当前ItemB子数组的首元素，只有此时才渲染ItemA的内容，其余行传入空字符串。
• 若要优化视觉体验，可给空内容的<td>添加CSS样式（如border-top: 0;），模拟单元格合并的视觉效果。

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