Jquery 带有Vue.js DataTable的tr包装器

我有一张有2个

的桌子。我需要包装这2个

，并在包装中执行

v-for

。但是

上的

v-for

会破坏数据表

实际代码：

{{item.A}
{{item.A}
{{item.A}
{{item.A}
{{item.A}
{{item.A}
{{item.T}
{{item.T}

尝试：

{{item.A}
{{item.A}
{{item.A}
{{item.A}
{{item.A}
{{item.A}
{{item.T}
{{item.T}

但是div破坏了数据表

---

感谢您的回答。

使用

模板，而不是
div
。这将循环数组中的项，而不创建额外的元素作为包装，而不是使用
div
使用
模板。这将循环数组中的项，而不创建额外的元素作为包装器

<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>