这是在支持template的浏览器中解决问题的方法。

<table>
   <tbody>
     <template v-for="item in items">
         <tr></tr>
         <tr class="detail-row"></tr>
     </template>
   </tbody>
</table>

如果您需要支持 * 不 * 支持template的浏览器，我通常会求助于render函数。
下面是这两种情况的一个工作示例。
第一个

在更新版本的VueJS中，它需要一个索引。

<table>
    <tbody>
      <template v-for="(item, index) in items">
        <tr :key="index">
           <td>{{item.master}}</td>
        </tr>
        <tr :key="index" class="detail-row">
           <td>{{item.detail}}</td>
        </tr>
      </template>
    </tbody>
  </table>

如果你想在double中使用标记.或者想在模板div中使用一个单独的组件在table内的tr标记（就像在一个新的组件中一样）你可以使用style=“display：contents”以保持表格行彼此内联。
Vue组件

<table> 
<template v-for="v-for="(price, index) in prices">
<div :key="price.id"  style="display: contents">
<tr><td>{{price.id}}</td><td>{{price.name}}</td></tr>
<tr col-span="2">{{price.desc}}</tr>
</div>
</template>
</table>

或者，如果要对行使用单独的组件
Table.vue

<template>
<div>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<template v-for="item in items">
<my-component :item=“item”/>
</template>
</tbody>
</table>
</div>
</template>

my-component.vue

<template>
<div style="display: contents">
<tr>
<td>{{item.firstname}}</td>
<td>{{item.lastname}}</td>
</tr>
<tr>
<td colspan="2" >
{{item.description}}
</td>
</tr>
</div>
</template>

不使用显示器：如果您想将行链接在一起，可以使用display: table-row-group类型

<table>
    <div v-for="v-for="(price, index) in prices"
           v-bind:key="price.id" 
           style="display: table-row-group">
        <tr>
            <td>{{price.id}}</td><td>{{price.name}}</td>
        </tr>
        <tr col-span="2">
            {{price.desc}}
        </tr>
    </div>
</table>