如何在 vuetify 中显示树视图组件 [英] How to display treeview component in vuetify

问题描述

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

<预><代码>[{id":4，名称":测试"，parent_id":0，图像":gVtHmE4tN18Y.png"，儿童":[{id":6，名称":测试2"，parent_id":4，图像":XBpqGq6CinOm.png"，父母":[{id":7，名称":Test3"，parent_id":6，图像":MNI3TmNXI1V5.png"，}]}]}]

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

解决方案

，默认加载

所以现在，如果节点/项目具有子项"或父项"属性，它仍将加载到树视图上.如果这两个属性都存在，则将使用 'children' .

这是一个示例代码 演示.

Can someone help me with render a treeview in vuetify im have a response as like this in this situation im using a vuetify framework

[
  {
    "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",
          }
        ]
      }
    ]
  }
]

and i dont know how display this response in treeview im try to use many solutions but im dont have any result This is what i found out is if someone know how to do this it will be nice thanks for help

解决方案

<v-treeview/>, by default, loads the 'children' property, if there's any. However, on your example, we can see that on the first children, it has no 'children' property. But 'parent' property is present, and you want to treat it as a children too.

Solution: You can create a computed variable that traverses all nodes, check if it has a 'parent' property, and add 'children' property that has the same value as the 'parent' property. (I'm gonna use this solution here for traversing the items).

<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://stackoverflow.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);
      });
    }
  }
}

So now, if the a node/item has a 'children' or 'parent' property to it, it will still be loaded on the treeview. If both property is present, the 'children' will be the one used.

Here is a sample code demo.

这篇关于如何在 vuetify 中显示树视图组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！