带有 Vue.js 数据表的 tr 包装器

Question

我有一张桌子，里面有 2 个<tr>。我需要包装这 2 <tr> 并在包装中执行 v-for。但是<tbody> 上的v-for 会破坏数据表。

实际代码：

<table class="table table-striped" id="data_table">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>

    <tbody v-for="item in items">
        <tr>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
        </tr>

        <tr>
            <td>{{ item.T }}</td>
            <td>{{ item.T }}</td>
        </tr>
    </tbody>
</table>

试过了：

<table class="table table-striped" id="data_table">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>

    <tbody>
    <div v-for="item in items">
        <tr>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
        </tr>

        <tr>
            <td>{{ item.T }}</td>
            <td>{{ item.T }}</td>
        </tr>
    </div>
    </tbody>
</table>

但是 div 破坏了数据表。

感谢您的回答。

Answer 1

使用template 代替div。这将循环您的数组中的项目，而不会创建额外的元素作为包装器