vue table点击展开隐藏tr，tr该如何正确遍历？

Question

先上效果图：
图1（目前遍历出来的效果）

图2（应该要达到的效果）

html中的遍历

    <tbody >
        <tr class="hap_table_tr" v-for="(item,index) in proceList">
            <td class="hap_table_bank">
                <p>{{ item.zhabb }}</p>
            </td>
            <td>
                <p>{{ item.proce }}</p>
            </td>
            <td>
                <time>{{ item.updateDate }}</time>
            </td>
            <td class="hap_table_notes" @click="spreadList(index)">
                <p class="hap_table_note">{{ item.descs.slice(0,6) }}</p>
                <i class="hap_table_drop1"></i>
            </td>
        </tr>
        <tr class="hap_table_descs" v-for="(item,index) in proceList">
            <td>{{ item.descs }}</td>
        </tr>
    </tbody>

需求：点击“一二三四五六”，展开隐藏的“一二三四五六七”,每一行数据之间的点击展开，收起互不影响
遇到的问题：代码中的两个tr该如何处理？才能遍历一行数据后，接着遍历一行备注?
希望大佬们不吝赐教~^_^

Answer 1

问题已解决，在两个tr外面套了一层template，有时候实在解决不了问题就去官网看看，确实能提供很多不错的思路，最怕的就是自己进入思想的误区~o(￣︶￣)o

<tbody >
    <template v-for="(item,index) in proceList">
        <tr class="hap_table_tr" >
            <td class="hap_table_bank">
                <p>{{ item.zhabb }}</p>
            </td>
            <td>
                <p>{{ item.proce }}</p>
            </td>
            <td>
                <time>{{ item.updateDate }}</time>
            </td>
            <td class="hap_table_notes" @click="spreadList(index)">
                <p class="hap_table_note">{{ item.descs.slice(0,6) }}</p>
                <i class="hap_table_drop1"></i>
            </td>
        </tr>
        <tr class="hap_table_descs">
            <td>{{ item.descs }}</td>
        </tr>
    </template>
</tbody>