解释:
这个警告是因为你在 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> 标签
|
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;"> <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> |