Vue table Click to expand Hidden tr,tr how to traverse correctly?

effect picture first:
figure 1 (currently traversed effect)
clipboard.png

2
clipboard.png

traversal in html

    <tbody >
        <tr class="hap_table_tr" v-for="(item,index) in proceList">
            <td class="hap_table_bank">
                

{{ item.zhabb }}

</td> <td>

{{ item.proce }}

</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) }}

<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>

demand: click "one two three four five six", expand the hidden "one two three four five six seven", click between each row of data to expand, put away the problems encountered by
: how to deal with the two tr in the code? After traversing a row of data, then traverse a row of remarks?
I hope the bosses will not hesitate to give us advice ~ ^ _ ^

Aug.30,2021

the problem has been solved. There is a layer of template, on the outside of the two tr. Sometimes, if you can't solve the problem, go to the official website to have a look. It does provide a lot of good ideas. The most fear is that you will enter the misunderstanding of thinking ~ o ( creative ideas ) o

.
<tbody >
    <template v-for="(item,index) in proceList">
        <tr class="hap_table_tr" >
            <td class="hap_table_bank">
                

{{ item.zhabb }}

</td> <td>

{{ item.proce }}

</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) }}

<i class="hap_table_drop1"></i> </td> </tr> <tr class="hap_table_descs"> <td>{{ item.descs }}</td> </tr> </template> </tbody>
Menu