在子组件的父元素中为多个 td 分组

Question

我有一个类似这样的布局：

我的父组件是这样的：

<!-- Parent -->
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Some</th>
            <th>Column</th>
            <th>Names</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="thing in things">
            <td>{{ thing.id }}</td>
            <my-child-component :thing="thing"></my-child-component>
        </tr>
    </tbody>
</table>

而我的子组件是这样的：

<!-- Child Component -->
<template>
    <td>{{ thing.foo }}</td>
    <td>{{ thing.bar }}</td>
    <td>{{ thing.baz }}</td>
</template>

我知道您需要在 Vue (2.0) 中拥有一个顶级元素，但我想知道是否有一个“不可见”的元素可以使用。我知道你可以在<template> 标签中使用v-for，但这在我的情况下不起作用。

或者，是否有一些包装器不会破坏一切。我尝试了 div/span 等，但它很糟糕而且没有语义。

基本上我想要的是将表头列与 tbody 内容对齐（我一直在设置一个带有 colspan 的 td 并在其中放置一个表，但列并不总是排队。

PS 实际情况比上面的例子复杂得多，而且我正在呈现表格数据，所以不想用 css 破解来重现表格。

Answer 1

由于您说“实际情况更复杂”，因此很难判断这是否适用于您的情况，但一种方法可能是这样的：

<tbody>
    <my-child-component :things="things"></my-child-component>
</tbody>

然后在子组件中：

<tr v-for="thing in things">
    <td>{{ thing.id }}</td>
    <td>{{ thing.foo }}</td>
    <td>{{ thing.bar }}</td>
    <td>{{ thing.baz }}</td>
</tr>

不确定这是否适用于您的场景？