代码之家 › 专栏 › 技术社区 › Walt Stoneburner

如何从Vue组件返回多行?

vuejs2 vue.js

0

Walt Stoneburner · 技术社区 · 7 年前

简而言之,我正在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

1 回复 | 直到 7 年前

1

7

Maciej Kwas 7 年前

在这个特定示例中,我只需将多个tr包装到tbody容器中,如下所示:

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