如何在Nuxt3中使用DataTables配置带子行切换的表格

步骤1：添加切换按钮列并管理展开状态 #

先在脚本里新增状态跟踪展开行，同时修改列配置，在最前面加一列放置切换按钮：

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

DataTable.use(DataTablesCore);

// 跟踪展开的行ID集合
const expandedRows = ref<Set<string>>(new Set());

// 切换行的展开/收起状态
const toggleRow = (rowId: string) => {
  expandedRows.value.has(rowId) 
    ? expandedRows.value.delete(rowId) 
    : expandedRows.value.add(rowId);
};

const columns = [
  // 新增展开/收起按钮列
  {
    data: null,
    orderable: false, // 禁止该列排序
    render: (data: any) => {
      const isExpanded = expandedRows.value.has(data.id);
      return `<button class="btn btn-sm btn-outline-primary" onclick="window.toggleRow('${data.id}')">
        ${isExpanded ? '▼' : '▶'}
      </button>`;
    }
  },
  { data: 'name' },
  { data: 'position' },
  { data: 'office' },
  { data: 'extn' },
  { data: 'start_date' },
  { data: 'salary' },
];

// 将toggleRow挂载到window，让render生成的按钮能调用到
(window as any).toggleRow = toggleRow;

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>

步骤2：修改模板渲染子行 #

在DataTable组件中添加<tbody>插槽，自定义行和子行的渲染逻辑：

<template>
  <div class="container">
    <DataTable
      :columns="columns"
      :data="data"
      class="table table-hover table-striped"
      width="100%"
    >
      <thead>
        <tr>
          <th></th> <!-- 对应新增的按钮列 -->
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody slot="tbody" slot-scope="props">
        <!-- 渲染主行 -->
        <tr v-for="row in props.data" :key="row.id">
          <td></td>
          <td>{{ row.name }}</td>
          <td>{{ row.position }}</td>
          <td>{{ row.office }}</td>
          <td>{{ row.extn }}</td>
          <td>{{ row.start_date }}</td>
          <td>{{ row.salary }}</td>
        </tr>
        <!-- 渲染展开的子行 -->
        <tr v-for="row in props.data" v-if="expandedRows.has(row.id)" :key="`child-${row.id}`">
          <td colspan="7" class="bg-light">
            <div class="p-3">
              <h5>{{ row.name }} 的详细信息</h5>
              <p><strong>职位:</strong> {{ row.position }}</p>
              <p><strong>入职日期:</strong> {{ row.start_date }}</p>
              <p><strong>薪资:</strong> {{ row.salary }}</p>
              <p><strong>办公地点:</strong> {{ row.office }}</p>
            </div>
          </td>
        </tr>
      </tbody>
    </DataTable>
  </div>
</template>

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

关键说明 #

• 用expandedRows这个Set来跟踪展开状态，避免重复操作
• 按钮列设置orderable: false，防止该列被排序干扰
• 子行通过colspan="7"占据所有列宽度，你可以根据需求自由修改子行内的展示内容

内容的提问来源于stack exchange，提问作者row