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）中拥有一个顶级元素，但我想知道是否有＆＃34;隐形＆＃34;我可以使用的元素。我知道您可以在v-for标记中使用<template>，但在我的情况下不会有效。

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

基本上我想要的是桌面标题列与tbody内容对齐（我一直在设置一个带有colspan设置的td并在其中放置一个桌子的道路，但是这些列没有＆＃39;总是排队。

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

Answer 1

由于您说的是“真实的事物更加复杂”，因此很难确定这是否适合您的情况，但是一种实现方法可能是这样的：

++i

然后在子组件中：

i++

不确定这是否适合您的情况？

将子元素的父元素中的多个td分组

1 个答案: