VueJS：v-for渲染表格表头不符合预期如何解决？

嘿，我来帮你搞定这个小问题！你现在的代码之所以会把表头垂直排列，核心原因是把v-for指令放在了<tr>标签上——这意味着每循环一次就会生成一个新的表格行，每个表头单元格自然就各自占一行了。

要实现横向并排的表头，只需要把v-for移到<th>标签上，让整个表头只保留一个<tr>容器就行。修改后的代码如下：

<tr>
  <!-- 循环生成带内容的表头单元格 -->
  <th v-for="(column, index) in schema" :key="index" scope="col">
    {{ column }}
  </th>
  <!-- 保留你需要的空表头单元格 -->
  <th></th>
</tr>

对应的schema数据示例可以是这样的：

data() {
  return {
    schema: ['Name', 'Price', 'Product ID']
  }
}

这样修改后，<tr>会作为唯一的表头行，里面的<th>通过循环横向生成，再加上最后那个固定的空单元格，就能完美匹配你想要的HTML结构啦！

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