Html 返回多个表行的Vue组件

我试图从单个组件

v-design-row

返回两个tr元素。我知道vue要求将模板元素包装在一个div中，但我不能将它们包装在一个div中，因为html表需要标记结构。当我在

v-design-row

组件中添加第二个

tr

时，vue不会渲染任何内容

有人能提出实现这一目标的最佳方法吗

main.vue

   <table class="table">
        <thead>
            <th>Image</th>
            <th>Name</th>
            <th>Description</th>
            <th>Status</th>
            <th>Order</th>
            <th>Edit</th>
            <th>Delete</th>
        </thead>
        <tbody v-for="catagory in catagories">
            <v-catagory-row :catagory="catagory"></v-catagory-row>
            <v-design-row v-for="design in catagory.designs" :design="design"></v-design-row>
        </tbody>
    </table>

形象
名称
描述
地位
命令
编辑
删除

v-design-row.vue

<template>
<tr>
    <td><img :src="design.image_directory" :alt="design.name"></td>
    <td>{{ design.name }}</td>
    <td>
        <button class="btn btn-secondary" type="button" data-toggle="collapse" :data-target="'#' + design.identifier" aria-expanded="false" :aria-controls="design.identifier">
            <i class="fa fa-plus" aria-hidden="true"></i> Show
        </button>
    </td>
    <td>
        <div class="switch">
            <input :id="'active'+design.id" v-model="design.active" class="btn-toggle btn-toggle-round-flat" type="checkbox">
            <label :for="'active'+design.id"></label>
        </div>
    </td>
    <td>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-caret-up" aria-hidden="true"></i>
        </button>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-caret-down" aria-hidden="true"></i>
        </button>
        {{ design.sort_order }}
    </td>
    <td>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-pencil" aria-hidden="true"></i>
        </button>
    </td>
    <td>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-trash" aria-hidden="true"></i>
        </button>
    </td>
</tr>
<tr>
    <td class="p-0" colspan="7">
        <div class="collapse" :id="design.identifier">
            <div class="p-3">
                {{ design.description }}
            </div>
        </div>
    </td>
</tr>
</template>

{{design.name}
显示
{{design.sort_order}
{{design.description}}

由于您的

v-design-row

中的第二个

tr

包含设计说明，我建议这是整个元素，它应该占据一行并有自己的布局

或者，您可以在组件中单独拥有一个描述和所有其他数据

还有，声明

vue要求将模板元素包装在div中

这不太正确。当模板是单个元素时，它可以有任何根元素。所以你可以

<template>
  <tr>
  </tr>
</template>

甚至

<template>
  <tr v-if="condition == 1">
  </tr>
  <tr v-else-if="condition == 2">
  </tr>
  <tr v-else>
  </tr>
</template>

---

您可以使用多个

节对行进行分组，如下所示：

... 
... 
... 
... 
... 

您可以在模板中使用

作为根元素：

<template>
  <tbody>
    <tr> ... </tr>
    <tr> ... </tr>
  </tbody>
</template>

... 
... 

我想我明白你的意思了，我将

v-for

添加到

tbody

内的模板中。此模板可用作带有vue逻辑的不可见html标记。您不能在组件模板内使用。@marlar，.@SuiDream。你说得对，我不清楚。我的意思是，您不能将其用作根元素，因此不能解决OP的问题。例如，这是不允许的：{{msg}{{msg}}