如何从 Vue 组件 return 多行？

Question

简而言之，我正在尝试在 VueJS (v2.5.17) 中做这样的事情：

<table>
  <my-multi-row-entry v-for="t in things" :thing="t" :key="t.id"/>
</table>

问题是每件事都由两个 <TR>...</TR> 条目表示。（我正在移植别人的代码；第一行中的 table 数据跨越到第二行，等等，所以现在我想保留他们拥有的.)

显而易见的解决方案行不通，因为 VueJS 只需要将一个根元素发送到 DOM。

MyMultiRowEntry.vue （无效代码，但显示用于说明）

<template>
  <tr><td rowspan="2">{{ thing.foo }}</td><td>...</td><td>{{ thing.bar }}</td></tr>
  <tr><td>{{ thing.xyzzy }}</td></tr>
</template>

<script>
  export default {
    props: {
      thing: {
         type: Object,
         required: true
      }
    }
  };
</script>

我已经探索过的路径：

Vue 没有片段（据我所知），比如 <React.Fragment>，所以我无法制作逻辑包装器。
HTML 本身不喜欢 <div> 包装 table 角色。
实际的模板内容比这个简单的例子更复杂，所以它不是静态内容...还有其他的 Vue 绑定等等，这禁止其他欺骗。
唯一的另一个采取了不同的方法并遇到了其他问题。

实现上述目的的最佳方法是什么？

Answer 1

在这个特定的示例中，我要做的只是简单地将多个 tr 包装到 tbody 容器中，如下所示：

MyMultiRowEntry.vue

<template>
  <tbody>
      <tr><td rowspan="2">{{ thing.foo }}</td><td>...</td><td>{{ thing.bar }}</td></tr>
      <tr><td>{{ thing.xyzzy }}</td></tr>
  </tbody>
</template>

如何从 Vue 组件 return 多行？

How to return multiple rows from a Vue Component?

vue.js

vuejs2