Vue2无Webpack环境下，如何用v-for每次渲染两个<tr>？

这个问题我之前在项目里也踩过坑——<tbody>的直接子元素只能是<tr>，用<div>或者其他容器包着循环的话，浏览器会直接抛出DOM结构不合法的错误。不过Vue提供了一个完美的解决方案：用<template>标签作为循环的载体！

<template>是Vue的内置虚拟元素，它只会渲染包裹的内容，自身不会生成任何真实的DOM节点，刚好适配<tbody>的结构要求。下面是具体的实现示例：

基础实现（每行绑定展开状态） #

<table>
  <tbody>
    <!-- 用<template>承载v-for，它不会被渲染成真实DOM -->
    <template v-for="item in dataList" :key="item.id">
      <!-- 主数据行，点击切换展开状态 -->
      <tr @click="item.isExpanded = !item.isExpanded">
        <td>{{ item.title }}</td>
        <td>{{ item.amount }}</td>
      </tr>
      <!-- 可展开的详情行，通过v-show控制显示 -->
      <tr v-show="item.isExpanded">
        <td colspan="2">
          <p>详情：{{ item.description }}</p>
          <p>额外信息：{{ item.extraInfo }}</p>
        </td>
      </tr>
    </template>
  </tbody>
</table>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      dataList: [
        { id: 1, title: '商品A', amount: 100, isExpanded: false, description: '这是商品A的详情', extraInfo: '库存充足' },
        { id: 2, title: '商品B', amount: 200, isExpanded: false, description: '这是商品B的详情', extraInfo: '限购5件' }
      ]
    }
  }
})
</script>

进阶实现（全局变量控制展开状态） #

如果你不想把展开状态存在数据项里，可以用一个单独的变量来管理当前展开的行ID：

<table>
  <tbody>
    <template v-for="item in dataList" :key="item.id">
      <tr @click="toggleExpand(item.id)">
        <td>{{ item.title }}</td>
        <td>{{ item.amount }}</td>
      </tr>
      <tr v-show="expandedItemId === item.id">
        <td colspan="2">
          <p>详情：{{ item.description }}</p>
        </td>
      </tr>
    </template>
  </tbody>
</table>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      dataList: [/* 你的数据 */],
      expandedItemId: null
    }
  },
  methods: {
    toggleExpand(id) {
      this.expandedItemId = this.expandedItemId === id ? null : id
    }
  }
})
</script>

关键注意点 #

• 一定要给<template>上的v-for绑定唯一的:key，避免Vue的列表渲染警告，同时保证更新逻辑正确。
• <template>只能作为Vue的渲染容器使用，不能添加除v-for、v-if之外的其他属性（比如class、style），因为它不会被渲染成真实DOM。
• 这种写法完全兼容CDN引入的Vue 2项目（不需要Webpack打包），直接就能运行。

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