如何在 Nuxt3 中使用 DataTables 配置具有子行的表

Question

很抱歉问这么基本的问题。 我目前正在使用 Nuxt3 和 TypeScript 设置一个项目，并使用 datatables.net-vue3 创建了一个表。现在，我想在第一列中添加一个切换按钮来显示和隐藏子行，但我完全陷入困境，无法弄清楚。 下面是我编写的组件的配置。 我知道这是一个非常基本的问题，但我会感谢您的帮助。 新年快乐！

<script setup lang="ts">
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-bs5';

DataTable.use(DataTablesCore);

const columns = [
  { data: 'name' },
  { data: 'position' },
  { data: 'office' },
  { data: 'extn' },
  { data: 'start_date' },
  { data: 'salary' },
];

const data = [
{
        "id": "1",
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
      },
      {
        "id": "2",
        "name": "Garrett Winters",
        "position": "Accountant",
        "salary": "$170,750",
        "start_date": "2011/07/25",
        "office": "Tokyo",
        "extn": "8422"
      },
      {
        "id": "3",
        "name": "Ashton Cox",
        "position": "Junior Technical Author",
        "salary": "$86,000",
        "start_date": "2009/01/12",
        "office": "San Francisco",
        "extn": "1562"
      }
]
</script>

<template>
  <div class="container">
   
    <DataTable
      :columns="columns"
      :data="data"
      class="table table-hover table-striped"
      width="100%"
    >
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
    </DataTable>
  </div>
</template>

<style>
@import 'bootstrap';
@import 'datatables.net-bs5';
</style>

Answer 1

我知道有点晚了，但也许它可以帮助别人。

首先，您需要定义将打开和关闭子行的列：

const datatableColumns = reactive([
    {
        className: 'dt-control',
        orderable: false,
        data: null,
        defaultContent: '',
    },
]};

然后你需要做的就是监听Datatable组件上的点击事件。通常使用 JQUERY，但由于我们使用的是 VUE，所以我们可以利用它。

您只需创建一个比较“dt-control”标签的函数即可打开子行，例如：

const openChildTable = ({ target }) => {
    if (target?.classList.contains('dt-control')) {
        const row = datatable.value.dt.row(target.closest('tr'));
        if (row.child.isShown()) {
            row.child.hide();
        } else {
            row.child(`
                <table class="w-full">
                    <tbody class="text-xs text-left">
                        <tr>
                          <th>Salary</th>
                          <th>Start date</th>
                          <th>Extension number</th>
                        </tr>
                        <tr>
                          <th>${row.data().salary}</th>
                          <th>${row.data().start_date}</th>
                          <th>${row.data().extn}</th>
                        </tr>
                    </tbody>
                </table>`)
                .show();
        }
    }
};

我留给你这个例子更详细，以便你可以更好地理解它。