Как вернуть несколько строк из компонента Vue?

Question

Короче говоря, я пытаюсь сделать что-то подобное в VueJS (v2.5.17):

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

Суть в том, что каждая вещь представлена ​​двумя <TR>...</TR> записями.(Я портирую чужой код; данные таблицы в первой строке охватывают вторую и т. Д., Поэтому на данный момент Я хотел бы сохранить то, что у них есть.)

Очевидное решение не работает, потому что 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> роли таблицы переноса.

• Фактическое содержимое шаблонаявляется более сложным, чем этот простой пример, так что это не статический контент ... есть другое связывание 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>