如何创建单文件Vue组件实现表格行渲染（不可用template/div包裹）

首先，你的核心问题是Vue单文件组件在模板中不能直接返回多个同级<tr>元素（Vue 2要求单根节点，Vue 3虽支持多根但表格场景下需要符合HTML规范），同时你又不能用<template>或<div>包裹（div会破坏表格结构，template在Vue 2的模板根里不被允许）。下面是具体解决方案和通用策略：

方案1：用<tbody>作为组件根容器（最稳妥，兼容Vue 2/3） #

HTML允许一个<table>包含多个<tbody>，所以我们可以把所有<tr>放在<tbody>里作为组件的根节点，完全符合表格规范，也不需要额外的div/template包裹：

<template>
  <tbody>
    <tr v-if="pricings.length > 0">
      <td colspan='2'>{{type_phrase}}</td>
    </tr>
    <tr v-for="pricing in pricings" :key="pricing.name">
      <td>{{pricing.name}}</td>
      <td>{{pricing.value}}</td>
    </tr>
    <tr v-else>
      <td colspan='2'>No {{type_phrase}}</td>
    </tr>
  </tbody>
</template>
<script>
export default {
  props: ['pricings', 'type_phrase']
}
</script>

在父组件中使用时，直接把这个组件插入到<table>内部即可：

<table>
  <!-- 其他表头/行 -->
  <pricing-rows :pricings="myPricings" type-phrase="Pricing Options" />
</table>

方案2：Vue 3多根节点（碎片） #

如果你使用的是Vue 3，可以直接在模板中返回多个<tr>作为根节点（Vue 3支持多根模板），不需要任何包裹元素，但要注意给每个根元素添加唯一的key（v-for的key已经有了，v-if/v-else的tr也建议加key）：

<template>
  <tr v-if="pricings.length > 0" key="header-row">
    <td colspan='2'>{{type_phrase}}</td>
  </tr>
  <tr v-for="pricing in pricings" :key="pricing.name">
    <td>{{pricing.name}}</td>
    <td>{{pricing.value}}</td>
  </tr>
  <tr v-else key="empty-row">
    <td colspan='2'>No {{type_phrase}}</td>
  </tr>
</template>
<script>
export default {
  props: ['pricings', 'type_phrase']
}
</script>

这种方式完全不需要包裹元素，但仅适用于Vue 3及以上版本。

方案3：Vue 2函数式组件（无模板） #

如果还在使用Vue 2，且不想用<tbody>包裹，可以写一个函数式组件，直接返回VNode数组，不需要根节点：

<script>
export default {
  functional: true,
  props: ['pricings', 'type_phrase'],
  render(h, context) {
    const { pricings, type_phrase } = context.props;
    const rows = [];
    
    if (pricings.length > 0) {
      rows.push(h('tr', [h('td', { attrs: { colspan: 2 } }, type_phrase)]));
      pricings.forEach(pricing => {
        rows.push(h('tr', [
          h('td', pricing.name),
          h('td', pricing.value)
        ]));
      });
    } else {
      rows.push(h('tr', [h('td', { attrs: { colspan: 2 } }, `No ${type_phrase}`)]));
    }
    
    return rows;
  }
}
</script>

函数式组件没有模板，直接通过render函数生成多个<tr>节点，完美满足你“无包裹”的需求。

通用策略总结 #

1. 优先利用HTML合法容器：对于表格场景，<tbody>、<thead>、<tfoot>都是天然的合法容器，既不会破坏表格结构，又能满足Vue的单根节点要求（Vue 2）。
2. Vue版本适配：
   • Vue 3直接用多根节点，不需要额外包裹；
   • Vue 2要么用合法容器，要么用函数式组件返回VNode数组。
3. 避免破坏HTML结构：绝对不要用<div>包裹表格行，这会导致浏览器解析错误，表格布局失效。

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