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绑定等正在发生，这阻止了其他欺骗行为。
唯一的其他similar answer采取了不同的方法并遇到了其他问题。

达到上述目的的最佳方法是什么？

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组件返回多行？

1 个答案: