Javascript 在vue中将多个元素包装到非情感元素标记中

我有一个html，它为table元素生成可扩展的行，但是它的方法是这样的：

<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>
<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>
<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>

---

在这里你可以看到小提琴：

下面，您可以看到示例：

$（'.js表节标题'）。单击（函数（）{
$（this.toggleClass（'open'）；
})

.js表格节标题>tr{
光标：指针；
}
.js表格节标题>tr>td:first child>i{
-webkit转换：-webkit转换0.15秒缓解；
转换：转换0.15秒缓解；
}
.js表格节标题+正文{
显示：无；
}
.js-table-sections-header.open>tr{
背景色：#f9f9f9；
}
.js-table-sections-header.open>tr>td:first child>i{
-webkit变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
}
.js-table-sections-header.open+tbody{
显示：表格行组；
}

名称
通道
日期
萨拉·霍兰德
残废
2015年6月7日12:16
+ $92,00
贝宝
2015年6月19日12:16
+ $54,00
贝宝
2015年6月16日12:16
+ $84,00
贝宝
2015年6月26日12:16
+ $24,00
贝宝
2015年6月27日12:16
玛雅人
残废
2015年6月7日12:16
+ $82,00
贝宝
2015年6月19日12:16
+ $24,00
贝宝
2015年6月16日12:16
+ $34,00
贝宝
2015年6月26日12:16
+ $29,00
贝宝
2015年6月27日12:16

您可以

一排
多行

您可以

一排
多行

Wow！比使用span或div好得多！谢谢你，哇！比使用span或div好得多！谢谢

<template>
   <non-affective-tag v-for="x in myList">
       <tbody class="js-table-sections-header">One row</tbody>
       <tbody>Multiple rows</tbody>
   </non-affective-tag>
</template>

<template>
   <template v-for="x in myList">
       <tbody class="js-table-sections-header">One row</tbody>
       <tbody>Multiple rows</tbody>
   </template>
</template>