Emitted value instead of an instance of Error) ＜tr＞ cannot be child of ＜table＞, according to HTML...

报错代码：

              //外层是table
  <th rowspan="2" style="vertical-align: middle; padding: 0">
            //内层也是table
                  <table style="width: 100%; height: 100%;">
                    <tr>
                      <td
                        rowspan="2"
                        class="text-center"
                        style="
                          vertical-align: middle;
                        "
                      >
                        模型设置
                      </td>
                      <td class="text-center">模型选择</td>
                    </tr>
                    <tr>
                      <td class="text-center">测试方法</td>
                    </tr>
                  </table>
                </th>

 控制台报错：

解释：

这个警告是因为你在 Vue 模板中直接使用了 <tr> 作为 <table> 的子元素，而没有包裹在 <tbody> 中。根据 HTML 规范，<tr> 必须位于 <thead>、<tbody> 或 <tfoot> 内。

解决方案：

方案1：添加 <tbody> 包裹

<th rowspan="2" style="vertical-align: middle; padding: 0">
  <table style="width: 100%; height: 100%; border-collapse: collapse;">
    <tbody>
      <tr>
        <td 
          rowspan="2"
          class="text-center"
          style="vertical-align: middle; border-right: 1px solid #ddd;"
        >
          模型设置
        </td>
        <td class="text-center" style="border-bottom: 1px solid #ddd;">模型选择</td>
      </tr>
      <tr>
        <td class="text-center">测试方法</td>
      </tr>
    </tbody>
  </table>
</th>

方案2：使用 Vue 的 <template> 标签

<th rowspan="2" style="vertical-align: middle; padding: 0">
  <table style="width: 100%; height: 100%; border-collapse: collapse;">
    <template v-for="(row, index) in tableData">
      <tr :key="index">
        <td 
          v-if="index === 0"
          rowspan="2"
          class="text-center"
          style="vertical-align: middle; border-right: 1px solid #ddd;"
        >
          模型设置
        </td>
        <td class="text-center" :style="index === 0 ? 'border-bottom: 1px solid #ddd;' : ''">
          {{ row.content }}
        </td>
      </tr>
    </template>
  </table>
</th>

为什么需要这样修改？

• HTML规范要求：<tr> 不能直接作为 <table> 的子元素

• Vue的hydration要求：服务端渲染(SSR)时更严格的HTML结构验证

• 更好的兼容性：避免未来浏览器可能的行为变化

建议使用方案1，它是最简单直接的修复方式，同时保持了原有的视觉效果。