Vuejs2 - 递归迭代“tr”元素

Question

我对 Vue 还很陌生，到目前为止我很喜欢它。但是，我遇到了以下问题，对于如何解决它的任何建议，我将不胜感激。

我想在对象上递归迭代以获取嵌套表。

我有这个模板：

<script type="text/x-template">
    <tr>
        <td><a v-on:click="toggle">[+]</a></td>
        <td>...</td>
    </tr>
    <tr is="row-item"  v-show="open" ...></tr>
</script>

它是递归的，所以每一tr行tr下面都有一个隐藏的行。

当用户单击父行上的 [+] 时，将出现子行。

我已经尝试将内容包装在一个tbody标签中，但后来我tbody进入了tbody，这仍然是一个非法的表格布局并破坏了它。

<script type="text/x-template">
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr is="row-item" ...></tr>
    </tbody>
</script>

小提琴：https : //jsfiddle.net/rafi16d/puwcs9ay/

Vue@1.x 并不需要一个根元素。没有我怎么办？

有没有人遇到过类似的事情？

谢谢。

Answer 1

（遗憾的是）Vue2 必须为每个组件提供一个真正的根元素。因此，我认为你没有那么多可能性：

• 执行两个组件而不是单个组件，并使用虚拟节点迭代它们：

  <table>
      <tbody>
          <template for="row in someRows">
              <tr>mainRow</tr>
              <tr>subRow</tr>
          </template>
      </tbody>
  </table>
  

• 忘记做一张真正的桌子的想法。<div>通过使用相关的显示 CSS 属性来模拟布局。