具有共享标题的表内嵌套行-Aura迭代

Question

我正在尝试基于具有以下结构的嵌套数组数据集创建具有嵌套行的表：

[   'key1'：[              'subKey1'：'subValue1'，              'subKey2'：'subValue2'，            ]，   'key2'：[              'subKey1'：'subValue1'            ] ]

我希望该表以共享的标题显示，并且如果该行的内部数组的话，第一列的高度应跨越长度。例如：

相反，我得到以下信息：

我的代码如下：

            <table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
            <tr class="slds-text-title--caps slds-cell-wrap">
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="A">A</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="B">B</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="C">C</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="D">D
                    </div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="E">E</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="F">F</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="G">G</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="H">H</div>
                </th>
            </tr>
            </thead>
            <tbody>
            <aura:iteration items="{!v.data}" var="row" indexVar="key">
                <tr>
                    <th scope="row" data-label="A" rowspan="{!row.value.length}">
                        parent{!key+1}
                    </th>
                    <aura:iteration items="{!row.value}" var="subRow" indexVar="num">
                        <th>b{!num+1}</th>
                        <th>c{!num+1}</th>
                        <th>d{!num+1}</th>
                        <th>e{!num+1}</th>
                        <th>f{!num+1}</th>
                        <th>g{!num+1}</th>
                        <th>h{!num+1}</th>
                    </aura:iteration>
                </tr>
            </aura:iteration>
            </tbody>
        </table>

我尝试在内部迭代中放置另一个“ tr”元素，但这只是将所有内容混为一谈。有什么想法吗？