Vue.js DataTable中<tr>包裹及v-for使用异常问题求助

我之前在项目里也踩过DataTable和Vue循环结合的这个坑，给你分享个靠谱的解决办法：

你当前的问题根源在于，在<tbody>上用v-for会生成多个<tbody>标签，而DataTable依赖标准的单<tbody>表格结构，多个tbody会直接打乱它的DOM解析逻辑，导致排序、分页、搜索这些核心功能异常。

最优解决方案：用Vue<template>作为循环容器 #

我们可以用Vue的<template>标签替代<tbody>来承载v-for指令，它是Vue的虚拟占位符，不会被渲染成真实DOM元素，这样既能实现两组<tr>为一个循环单元的需求，又能保持整个表格只有一个<tbody>，完美兼容DataTable。

修改后的完整代码示例 #

<table class="table table-striped" id="data_table">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <!-- 用template包裹两组tr，作为循环容器，不生成额外DOM -->
    <template v-for="(item, index) in items" :key="item.id || index">
      <tr>
        <td>{{ item.A }}</td>
        <td>...</td>
        <!-- 第一行的其他内容 -->
      </tr>
      <tr>
        <td colspan="6">{{ item.detailContent }}</td>
        <!-- 第二行的内容，比如展开详情、关联数据等 -->
      </tr>
    </template>
  </tbody>
</table>

关键细节提醒 #

• 务必给v-for加上:key属性：优先用每个item的唯一标识（比如item.id），如果没有唯一ID再用index，这能避免Vue渲染时出现重复或异常。
• DataTable初始化时机：要在Vue的mounted钩子中配合$nextTick执行初始化，确保DOM已经完全渲染完成，示例代码如下：

mounted() {
  this.$nextTick(() => {
    $('#data_table').DataTable({
      // 你的DataTable配置项
      paging: true,
      searching: true,
      ordering: true
    });
  });
}

这个方案我自己亲测有效，换成template之后，DataTable的所有功能都能正常工作，同时也满足了循环两组的需求~

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