Vuejs中的嵌套表
Vuejs中的嵌套表
提问于 2021-01-26 01:32:30
我正在学习VueJs，但我正在努力创建以下标记并保持其语义正确。我想使用一个v-for循环来重复这两个组件--但是我该把它放在哪里呢？我不能将它添加到tbody中，因为它不能重复。如果我将循环添加到这两个tr行中，最终得到的结果是component1重复了n次，然后component2重复了n次。从语义上讲，我不能使用span或div (除非它在td元素中)，组件必须有一个根。感谢您的建议。
<thead></thead>
<tbody>
<tr class="component1">
<td></td><td></td><td></td>
</tr>
<tr class="component2">
<td colspan="3">
<table>
...
</table>
</td>
</tr>
</tbody>
</table>回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-26 03:31:06
如果它们是组件，只需遍历它们。
let components = {
component1: {
template: '#component1'
},
component2: {
template: '#component2'
}
}
new Vue({
el: "#app",
data:() => ({
components
})
})td{border:1px solid orange}<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<table>
<thead></thead>
<tbody>
<component :is="component" v-for="(component, index) in components" :key="index"></component>
</tbody>
</table>
</div>
<template id="component1">
<tr class="component1">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</template>
<template id="component2">
<tr class="component2">
<td colspan="3">
<table>
...
</table>
</td>
</tr>
</template>
如果没有充分的理由使用表格，你应该使用div，表格不是用来设计布局的。
Stack Overflow用户
发布于 2021-01-26 01:53:42
这对我很有效
<table border=1>
<thead></thead>
<tbody>
<div v-for="index in 10" :key="index" >
<tr class="component1">
<td></td><td></td><td></td>
</tr>
<tr class="component2">
<td colspan="3">
<table>
...
</table>
</td>
</tr>
</div>
</tbody>
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65889626
复制相关文章
相似问题
腾讯云开发者
