Vue 2中如何使用v-for为每个数据项生成多行表格行？

完全可行，Vue专门提供了适配这种场景的方案，能让你在不生成多余DOM元素的前提下，为每个数据项渲染多行<tr>。

核心方案：使用<template>作为循环容器 #

Vue的<template>标签是专门用来做逻辑包裹的占位符，它不会被渲染成真实的DOM元素，正好对应你伪代码里的<nothing>。直接把v-for指令绑定在<template>上，内部放置需要为每个数据项生成的多个<tr>即可：

<template>
  <table>
    <!-- template仅作为循环容器，不会被渲染到DOM -->
    <template v-for="item in items" :key="item.id">
      <tr>
        <td>{{ item.line1 }}</td>
      </tr>
      <tr>
        <td>{{ item.line2 }}</td>
      </tr>
    </template>
  </table>
</template>

注意事项 #

• 务必给v-for加上:key属性，这是Vue列表渲染的强制要求，用来保证每个循环项的唯一性，避免渲染异常。
• 最终渲染后的DOM结构里，<table>会直接包含所有生成的<tr>，完全符合表格的DOM规范，没有任何多余的包裹元素。

这个方案在Vue 2和Vue 3中都能正常使用，是解决这类表格多行渲染需求的标准做法。

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