Vue3中使用响应式数据时HTML表格显示异常求助

你的表格布局异常是HTML结构错误导致的：<tr>不能直接嵌套在另一个<tr>内部，这种不符合规范的结构会让浏览器解析混乱，结合Vue响应式数据渲染后，就会出现行折叠的问题。

步骤1：修正基础表格结构 #

正确的带rowspan的表格结构应该是：将跨多行的单元格放在第一行，后续行只填充剩余列，示例如下：

<table border="1">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <!-- 第一行：包含跨3行的Company单元格 -->
  <tr>
    <td rowspan="3">test</td>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
  <!-- 第二、三行：仅填充Contact和Country列 -->
  <tr>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
  <tr>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
</table>

步骤2：结合Vue3响应式数据实现 #

假设你的响应式数据结构如下：

import { ref } from 'vue'

// 示例数据：公司名 + 多组联系人/国家信息
const companyInfo = ref({
  name: 'test',
  details: [
    { contact: 'test 1', country: 'China' },
    { contact: 'test 2', country: 'USA' },
    { contact: 'test 3', country: 'Japan' }
  ]
})

在Vue模板中，通过v-for动态渲染时，仅在第一行渲染跨多行的单元格，并通过details.length动态设置rowspan的值：

<table border="1">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr v-for="(item, idx) in companyInfo.details" :key="idx">
    <!-- 仅循环的第一项渲染Company单元格，rowspan值等于数据条数 -->
    <td v-if="idx === 0" :rowspan="companyInfo.details.length">
      {{ companyInfo.name }}
    </td>
    <td>{{ item.contact }}</td>
    <td>{{ item.country }}</td>
  </tr>
</table>

这样就能保证表格结构符合规范，Vue动态渲染后也不会出现行折叠的问题。

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