如何添加 <table> 标签的子元素 <tbody>，使用 Vue.js 组件

Question

我有一个 Vue (v2.5.16) 组件，它在模板中使用 <tbody> 和重复的 <tr> 元素。组件数据最初是空的，当我添加数据时，Vue 将 <tbody> 和 table 行放在 [=40= 的上方和外面]，就在 #clines [=39 之后=].为什么？

这里是有问题的 html。该组件是 srvaudit-table-rows，在现有的 <tbody> 标签下。组件模板使用额外的 <tbody> 作为其父元素。根据 this answer.

，<table> 内允许有多个 <tbody> 元素

<div id="app" class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div id="clines" class="table-responsive ctable">
                <table class="table table-sm nowrapp">
                    <thead>
                        <tr>
                            <th>Command</th>
                            <th>Directory</th>
                            <th>Return</th>
                            <th>Pipes</th>
                            <th>When</th>
                            <th>Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>time date</td>
                            <td>/root</td>
                            <td>42</td>
                            <td>2</td>
                            <td>Feb 2</td>
                            <td>44s</td>
                        </tr>
                    </tbody>
                    <srvaudit-command-list></srvaudit-command-list>  // Desired placement of component template and data.
                </table>
            </div>
        </div>
    </div>
</div>

这是组件。

Vue.component('srvaudit-command-list', {
    template: `
        <tbody>
            <tr v-for="(command, index) in commands" :key="index">
                <td>{{ command.cmd }}</td>
                <td>{{ command.cwd }}</td>
                <td>{{ command.rval }}</td>
                <td>{{ command.pipes }}</td>
                <td>{{ command.begin }}</td>
                <td>{{ command.duration }}</td>
            </tr>
        </tbody>
    `,
    props: ['command'],
    data() {
        return {
            commands: []
        };
    },
    mounted: function() {
        Echo.private(`session.${sid}.commands`)
            .listen('CommandReceived', (data) => {
                this.commands.push(data.command);  // Here is where it renders the component after pushing some data.
            });
    },
});

这是在将新 command 推送到 commands 数据后呈现 html 的方式。

<div id="app" class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div id="clines" class="table-responsive ctable">
                <tbody>                       // incorrect placement
                    <tr>                      // incorrect placement
                        <td>time date</td>    // incorrect placement
                        <td>/root</td>        // incorrect placement
                        <td>42</td>           // incorrect placement
                        <td>2</td>            // incorrect placement
                        <td>Feb 2</td>        // incorrect placement
                        <td>44s</td>          // incorrect placement
                    </tr>                     // incorrect placement
                </tbody>                      // incorrect placement
                <table class="table table-sm nowrapp">
                    <thead>
                        <tr>
                            <th>Command</th>
                            <th>Directory</th>
                            <th>Return</th>
                            <th>Pipes</th>
                            <th>When</th>
                            <th>Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>time date</td>
                            <td>/root</td>
                            <td>42</td>
                            <td>2</td>
                            <td>Feb 2</td>
                            <td>44s</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

非常感谢任何帮助！我已经为此苦苦挣扎了几天，并尝试了在 SO 和 Vue 文档中可以找到的所有方法。

Answer 1

插值或组件替换只有在vue会得到任何tag时才能完成，因为除了table，tbody，[=15之外不能有任何其他标签=]、tr、td。您可以通过将任何标签放在 table 标签内来进行交叉检查，而不使用 vue，它将自动从 table 标签中删除并放在 table 标签之外并且没有 table 标签它 tbody 不显示任何内容。

你可以查看other discussion regarding this and one more

这是通过 vue.js 在 table 标签内插入 tbody 的解决方案，使用另一个组件 base-table

Vue.component('base-table',{
 template:`<div>
   <table class="table table-sm nowrapp">
                    <thead>
                        <tr>
                            <th>Command</th>
                            <th>Directory</th>
                            <th>Return</th>
                            <th>Pipes</th>
                            <th>When</th>
                            <th>Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>time date</td>
                            <td>/root</td>
                            <td>42</td>
                            <td>2</td>
                            <td>Feb 2</td>
                            <td>44s</td>
                        </tr>
                    </tbody>
                    <srvaudit></srvaudit>
                </table>
                </div>
  `
});

Vue.component('srvaudit', {
    template: `
          <tbody>
                        <tr>
                            <td>time date</td>
                            <td>/root2</td>
                            <td>99</td>
                            <td>8</td>
                            <td>Feb 5</td>
                            <td>55s</td>
                        </tr>
                        <tr>
                            <td>time date</td>
                            <td>/root4</td>
                            <td>101</td>
                            <td>10</td>
                            <td>Feb 25</td>
                            <td>88s</td>
                        </tr>
                    </tbody>
    `,
    props: ['command'],
    data() {
        return {
            commands: []
        };
    },
    mounted: function() {
    },
});
new Vue({
  el: '#app'
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script></script>

<div id="app" class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div id="clines" class="table-responsive ctable">
                <base-table></base-table>
            </div>
        </div>
    </div>
</div>

JSFiddle for the same

如何添加 <table> 标签的子元素 <tbody>，使用 Vue.js 组件

How to add <table> tag's child element <tbody>, Using Vue.js component

laravel

vue.js

laravel-5

vuejs2

laravel-5.5