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

Posted 2023-02-22

【中文标题】带有 Vue.js 数据表的 tr 包装器

【英文标题】：Wrapper for tr with Vue.js DataTable

【发布时间】：2018-10-10 06:11:42

【问题描述】：

我有一张桌子，里面有 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 破坏了数据表。

感谢您的回答。

【参考方案1】：

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