Vue组件返回多个表行 [英] Vue component returning multiple table rows
问题描述
我正在尝试从单个组件 v-design-row
返回两个tr元素.我知道vue要求将模板元素包装在div中,但是由于html表需要标签结构,因此我无法将它们包装在div中.当我在 v-design-row
组件中添加第二个 tr
时,vue不会呈现任何内容.
I'm attempting to return two tr elements from a single component v-design-row
. I know vue requires the template elements to be wrapped in a div, but I cannot wrap them in a div because of the tag structure html tables require. When I add the second tr
in the v-design-row
component then vue doesn't render anything.
有人可以建议实现这一目标的最佳方法吗?
Can anyone suggest the best method for accomplishing this?
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
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>
推荐答案
由于您的 v-design-row
中的第二个 tr
包含设计说明,我建议这是整个元素,应该占据一行并具有自己的布局.
Since second tr
in your v-design-row
contains description of design, I'd suggest that this is whole element and it should occupy one row and have its own layout.
或者,您可以在组件中分别包含描述和所有其他数据.
Alternatively, you can have a description separately and all other data in component.
另外,声明
vue要求将模板元素包装在div中
vue requires the template elements to be wrapped in a div
不太正确.模板可以是单个元素,但可以包含任何根元素.所以你可以拥有
is not quite correct. Template can have any root element while it is a single element. So you can have
<template>
<tr>
</tr>
</template>
甚至
<template>
<tr v-if="condition == 1">
</tr>
<tr v-else-if="condition == 2">
</tr>
<tr v-else>
</tr>
</template>
这篇关于Vue组件返回多个表行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!