如何在Vue中放置嵌套递归树结构的交替背景

Question

我正在尝试构建一个具有嵌套树结构的OKR类型的组件。我使用了动态递归组件来避免深度硬代码。树的所有节点都可以展开。但是，我无法编写适当的逻辑来使节点具有交替的背景。由于节点可以扩展，因此必须相应地调整子节点的背景。

下面是我在代码沙箱中的示例：代码链接。

我想达到这样的目的：

​

展开时，应该调整子节点的背景，如下所示：

​

​

Answer 1

如果您确信树项都有相同的高度(没有溢出等)，那么这里有一个技巧。我们将重复的背景图像应用于容器，而不是单个项目。

.tree {
  background: 0 -10px / 100% 100px linear-gradient(#fed 50%, #fff 50%);
}

100px对应于(项目高度)×2。

当然，如果项目有不同的高度，它将无法工作。在这种情况下我不知道有什么解决办法。