Vuejs2 - 递归地迭代“tr”元素

我对Vue很新，而且我很喜欢它。但是，我遇到了以下问题，我将非常感谢有关如何解决此问题的任何建议。Vuejs2 - 递归地迭代“tr”元素

我想递归迭代对象来获取嵌套表。

我有这样的模板：

<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/

[email protected]并不需要一个根元素。我怎么能没有？

有没有人碰到类似的东西？

谢谢。

来源

2017-05-31 Raphaël Gabriel

https://vuejs.org/v2/guide/components.html#Recursive-Components –

@EricGuan的文档表明，它可能调用自己在自己的模板中的分量，是的，它的工作。但问题是我不能在我的模板中使用多个根元素。 –

（可惜）Vue2势在必行地为每个组件需要一个真正的根元素。所以从这一点，我认为你没有这么多的可能性：

做两个组件，而不是单一的一个，和ITER他们都与虚拟节点：

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

忘记做一个真正的桌子的想法。改为使用<div>和related display css properties来模拟布局。

来源

2017-05-31 14:30:13 Cobaltway

如果有人有同样的问题。我忘记了使用“table”元素的想法，并使用了div元素。 https://jsfiddle.net/rafi16d/whsbLn59/ –

好吧，我设法做到了。红色边框让你看到结构，你可能想要调整填充。

https://jsfiddle.net/guanzo/puwcs9ay/9/

一些黑客和思想，我从jQuery的数据表并如何嵌套行借：

你可以把在td相当多的东西。因此，使根元素tr，筑巢一个td与colspan 100％，然后你可以嵌套一个表。既然你可以把tr放在table之内，递归就开始了。

tr - >td - >table - >tr - >td - >table循环往复

<td colspan="42">

42，或任何数量的绝对比你列数高，基本上等同于colspan="100%"。

你也可以 - 也许应该 - 使用你的数组长度来给colspan正确的列数，我只是懒惰。

内部trs已更改其默认css。

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

来源

2017-05-31 15:10:35

谢谢你的工作。但是他们对您的解决方案有问题：子项的列与父列不匹配。所以我认为我将使用两个组件而不是一个组件。不过谢谢。 –

Vuejs2 - 递归地迭代“tr”元素

回答

相关问题