具有 Vue 语法的 jQuery DataTables 子行

Posted 2023-02-22

【中文标题】具有 Vue 语法的 jQuery DataTables 子行

【英文标题】：jQuery DataTables child rows with Vue syntax

【发布时间】：2018-09-21 03:03:01

【问题描述】：

我有一个带有 jQ​​uery DataTables 表的 Vue JS 组件。我想向每个主行添加多个子行。可以这样做：

this.table = $('#dataTable').DataTable(stateSave: true);
        var self = this;
        this.table.rows().every( function ( rowIdx, tableLoop, rowLoop ) 
            var data = this.data();

            let row = self.table.row(this).child(
              $('<tr id="thisIsAChildRow"></tr>' )[0]
            ).show();

         );

效果很好，但我必须在子行中添加一些 Vue 逻辑。在这种情况下，这些代码不起作用，因为没有编译到 Vue 模板，所以基本上 Vue 渲染器认为这些只是普通的 html 代码。

在网上搜索了几个小时但没有成功后，我最终找到了一个非常肮脏的解决方法，如果只有一个子行，它就可以工作。我将一个新的 Vue 实例附加到我创建的每个表行（使用 'el' 语法）。我知道它可能存在很多性能问题，但我仍然可以使用该解决方案，直到找到更好的解决方案。

    initTable()
        this.table = $('#dataTable').DataTable(stateSave: true);
        var self = this;
        this.table.rows().every( function ( rowIdx, tableLoop, rowLoop ) 
            var data = this.data();

            let orderId = data[0];
            let row = self.table.row(this).child(
              $('<tr id="vue'+orderId+'"></tr>' )[0]
            ).show();

            self.createNewVueForChildRows(orderId)
         );
    ,

    createNewVueForChildRows(orderId)
        new Vue(
            el: '#ordervue'+orderId,
            data: 
                orderId:orderId,
            ,
            template:'<tr ><td>orderId</td></tr>',
        );
    ,

但是，我需要在一行中添加多个子行，但是一个 Vue 模板只能处理一个根元素。

我的子行中的列需要与父行中的列相同。

有没有人可以给我解决方案或建议？

【问题讨论】：

无耻插件，使用我的包装组件和主/细节实现：github.com/niiknow/vue-datatables-net#master-details-pattern

【参考方案1】：

更简单的解决方案是使用vue-bootstarp 表格组件。它允许您使用数据表的强大功能，同时将所有内容保存在 Vue 组件中。对于子行选项，您应该查看文档中提供的 row-details 插槽选项。您可以轻松访问表中可用的所有数据，也可以从 vue 内部对其进行操作。

从文档中复制示例以显示子行：

  <template slot="row-details" slot-scope="row">
    <b-card>
      <ul>
        <li v-for="(value, key) in row.item" :key="key"> key :  value</li>
      </ul>
    </b-card>
  </template>

【讨论】：

感谢您的建议。我有一些 jQuery DataTables 特定的代码，我还不知道（在第一次查看文档之后）如何在 vue-bootstrap 中执行，但我会试一试。