应用笔记 · 2025年8月25日

解决warning: cannot be child of , according to HTML specifications.

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

解决方案:
方案1:添加 <tbody> 包裹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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> 标签