如何在 vuetify 中显示树视图组件

Posted 2023-02-23

【中文标题】如何在 vuetify 中显示树视图组件

【英文标题】：How to display treeview component in vuetify [closed]

【发布时间】：2021-01-01 15:39:52

【问题描述】：

有人可以帮我在 vuetify 中渲染树视图吗 我有这样的回应 在这种情况下，我使用了 vuetify 框架

[
  
    "id": 4,
    "name": "Test",
    "parent_id": 0,
    "image": "gVtHmE4tN18Y.png",
    "children": [
      
        "id": 6,
        "name": "Test2",
        "parent_id": 4,
        "image": "XBpqGq6CinOm.png",
        "parent": [
          
            "id": 7,
            "name": "Test3",
            "parent_id": 6,
            "image": "MNI3TmNXI1V5.png",
          
        ]
      
    ]
  
]

我不知道如何在树视图中显示此响应 我尝试使用许多解决方案，但我没有任何结果 这是我发现的 如果有人知道如何做到这一点，那就太好了 感谢帮助

【问题讨论】：

只显示Test?没有办法扩展树？

你应该在这里阅读 v-for vuejs.org/v2/guide/list.html

【参考方案1】：

<v-treeview/> 默认加载'children' 属性（如果有）。但是，在您的示例中，我们可以看到在第一个孩子身上，它没有“孩子”属性。但是存在“父”属性，您也想将其视为子属性。

解决方案：您可以创建一个遍历所有节点的计算变量，检查它是否具有“父”属性，并添加与“父”属性具有相同值的“子”属性。 （我将使用这个解决方案 here 来遍历项目）。

<v-treeview :items="modifiedItems"/>

data: () => (
  items: [...]
),

computed: 
  modfiedItems() 
    // let's clone the items so we won't pollute the original data.
    const clonedItems = JSON.parse(JSON.stringify(this.items));
    this.traverse(clonedItems);
    return clonedItems;
  
,
methods: 
  // reference: https://***.com/a/722676/9183405
  traverse(items) 
    // check if the node is an object or array
    if (items !== null && typeof items === "object") 
      Object.entries(items).forEach(([key, value]) => 
        // check if the item/node has a 'parent' property
        if (key === "parent") 
          items.children = value; 
        
        this.traverse(value);
      );
    
  

所以现在，如果一个节点/项目有一个“子”或“父”属性，它仍然会被加载到树视图上。如果两个属性都存在，则使用“children”。

这是一个示例代码demo。

【讨论】：

不客气。祝你好运！