如何使用Vue与TypeScript为DataTables添加子行？

要实现DataTables的子行展开/收起功能，核心是结合DataTables原生行操作API与Vue组件渲染能力，以下是完整实现方案：

步骤1：调整模板结构 #

新增触发展开的操作列，同时给DataTable添加ref以获取实例：

<template>
  <DataTable 
    ref="dataTableRef"
    :data="data"
    class="display" 
    width="100%"
  >
    <thead>
      <tr>
        <th></th> <!-- 放置展开/收起按钮 -->
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody></tbody>
  </DataTable>
</template>

步骤2：TypeScript 逻辑实现 #

通过DataTables API监听行点击事件，用Vue的虚拟DOM渲染子行内容，同时处理展开/收起状态切换：

<script lang="ts">
import { defineComponent, ref, onMounted, createVNode, render } from "vue";
import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net';
DataTable.use(DataTablesLib);

// 包含子行扩展数据的数据源
const data = [
  ['Pistone', 'Sanjama', 'pistone@ghii.org', '用户ID：001，注册时间：2023-01-01'],
  ['Timothy', 'Banda','timothy@ghii.org', '用户ID：002，注册时间：2023-02-15'],
  ['Blessings', 'Chidambe', 'blessings@ghii.org', '用户ID：003，注册时间：2023-03-20']
];

export default defineComponent({
  name: "DataRequestDatatable",
  components: { DataTable },
  setup() {
    const dataTableRef = ref<InstanceType<typeof DataTable> | null>(null);
    let dtInstance: DataTablesLib.Api | null = null;

    onMounted(() => {
      dtInstance = dataTableRef.value?.dt;
      if (!dtInstance) return;

      // 渲染第一列的展开按钮
      dtInstance.column(0).render(() => '<button class="expand-btn">+</button>');

      // 监听行点击事件
      dtInstance.on('click', 'tr', function() {
        const row = dtInstance?.row(this);
        if (!row) return;

        if (row.child.isShown()) {
          // 收起子行
          row.child.hide();
          this.querySelector('.expand-btn')?.textContent = '+';
        } else {
          // 用Vue虚拟DOM构建子行内容
          const childContent = createVNode('div', { class: 'child-row' }, [
            createVNode('p', null, row.data()[3]),
            createVNode('p', null, '更多详情：可自定义渲染Vue组件、表单等复杂内容')
          ]);
          // 将虚拟DOM转为HTML
          const container = document.createElement('div');
          render(childContent, container);

          // 显示子行
          row.child(container.innerHTML).show();
          this.querySelector('.expand-btn')?.textContent = '-';
        }
      });
    });

    return { data, dataTableRef };
  }
});
</script>

步骤3：添加子行样式 #

优化子行展示效果：

<style scoped>
@import 'datatables.net-dt';

.expand-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.2em;
}

.child-row {
  padding: 1rem;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
}
</style>

核心说明 #

• 通过dataTableRef.value?.dt获取DataTables原生实例，调用row().child()API控制子行显隐
• 用Vue的createVNode和render函数可将Vue组件或虚拟DOM转为HTML嵌入子行，保留Vue响应式能力
• 可根据业务需求自定义子行内容，比如引入其他Vue组件展示复杂信息

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