Recursion Vuejs2-迭代“；tr”；元素递归

我是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>

小提琴：

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

有人遇到过类似的事情吗

谢谢。

（遗憾的是）Vue2迫切需要为每个组件提供一个真正的根元素。 因此，我认为你没有太多的可能性：

• 执行两个组件而不是单个组件，并使用虚拟节点对两个组件进行iter：

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

  
  主线
  代沟
  

• 忘记做一个真正的桌子的想法吧。使用
  模拟布局，并改为使用

---

好吧，我设法做到了。红色边框用于查看结构，您可能需要调整填充
我借鉴了jQuery Datatables如何处理嵌套行的一些技巧和想法：
您可以在

td

中放入几乎任何内容。因此，让根元素a

tr

，用colspan 100%嵌套a

td

，然后就可以嵌套一个表了。由于可以将

tr

放入

表中，因此递归开始

tr
->
td
->
表格
->
tr
->
td
->
表格


42，或任何绝对高于列计数的数字，基本上等于
colspan=“100%”

您还可以——也可能应该——使用数组的长度为
colspan
提供正确的列数，我只是懒惰而已

内部
trs
已更改其默认css

.inner-tr{
    display: table;
    width:100%;
}

如果在计算属性中展平树（对其进行规范化），则可以呈现HTML表，而无需在组件本身中进行递归，从而避免黑客攻击或生成无效HTML


Vue.component（'tree-table-row'{
数据（）{
返回{
缩进：20，
左：5
};
},
道具：['node']，
模板：“#树表行”
});	
var app=新的Vue({
el:“#树作为表”，
数据：{
树：{
id:0，
价值：“水果”，
名称：“根”，
儿童：[
{
id:1，
名称：“A”，
儿童：[{
id:2，
名称：“B”，
价值：“香蕉”
}],
价值：“苹果”
},
{
id:3，
名称：“C”，
儿童：[{
id:4，
名称：“D”，
价值：“榴莲”
}],
价值：“樱桃”
}
]
}
},
计算：{
树_数组（）{
返回this.normalizedTree（this.tree，0）；
}
},
方法：{
规范化树（节点，级别）{
var_this=这个；
var normal_元素={id:node.id，name:node.name，value:node.value，level:level}；
var数组_片段=[normal_元素]；
if（node.children&&node.children.length>0）{
var i；
对于（i=0；i
.vue表{
边界塌陷：塌陷；
字体系列：无衬线；
} 
运输署{
边框：1px纯色浅灰色；
填充物：2px 5px；
}

{{node.name}
{{node.value}
@docs表明组件可以在自己的模板中调用自己，是的，它可以工作。但问题是我不能在模板中使用多个根元素。谢谢你的工作。但您的解决方案存在一个问题：子列与父列不匹配。所以我想我将使用两个组件，而不是一个组件。不过还是谢谢你。如果有人有同样的问题。我忘记了使用“table”元素的想法，我使用了div元素。
.inner-tr{
    display: table;
    width:100%;
}