使用vuejs获取树的特定节点的详细信息

如何解决使用vuejs获取树的特定节点的详细信息

我有一个树数据结构。在该结构中，存在具有文件数组的嵌套子节点。我想根据节点单击事件获取这些文件的详细信息。

这是树的模拟数据：

    data:[{
  id: 1,name: 'Resources',type:'folder,files: [],children: [
    {
      id: 4,name: 'Resources Zone 1-A',type: 'folder',files: [
        "Resources-zone-east.doc","Resources-zone-east-1-A.doc"
      ]
    }
  ]
},{
  id: 2,name: 'Services',files: [
    "Services-east-zone-2A.doc","Services-West-zone-2A.doc"
  ],children: [
     id: 5,name: 'Services-South-Zone-3B",files: [
         "Services-South-zone-3B1.doc","Services-South-zone-3B2.doc"
      ],]
  },{
  id: 3,name: 'Servers',files: [
    'Servers-east-zone-3B.doc','Servers-west-zone-3B.doc'
  ],children: []
}]

我想这样做。如果我单击子节点'Services-South-Zone-3B'，那么我会将这些文件放入数组->

let result=["Services-South-zone-3B1.doc","Services-South-zone-3B2.doc"]

如何像这样迭代和显示文件？

解决方法

您可以使用递归组件，请参见：https://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components

这是一个基于您的数据的简单示例：

const Node = {
  name: 'node',template: `
    <div>
        <a @click="$emit('input',value.files)">
        {{ value.name }}
      </a>
      <node v-if="value.children" v-for="child in value.children" :key="child.id" :value="child" @input="$emit('input',$event)"/>
    </div>
  `,props: ['value']
};

new Vue({
  el: '#app',components: {
    Node
  },data() {
    return {
      tree: {
        id: 0,name: 'Root',files: [],children: [{
            id: 1,name: 'Resources',type: 'folder',children: [{
              id: 4,name: 'Resources Zone 1-A',files: [
                'Resources-zone-east.doc','Resources-zone-east-1-A.doc'
              ]
            }]
          },{
            id: 2,name: 'Services',files: [
              'Services-east-zone-2A.doc','Services-West-zone-2A.doc'
            ],children: [{
              id: 5,name: 'Services-South-Zone-3B',files: [
                'Services-South-zone-3B1.doc','Services-South-zone-3B2.doc'
              ]
            }]
          },{
            id: 3,name: 'Servers',files: [
              'Servers-east-zone-3B.doc','Servers-west-zone-3B.doc'
            ],children: []
          }
        ]
      }
    };
  },methods: {
    log(value) {
      console.log(value);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <node :value="tree" @input="log"></node>
</div>

这是基本的树结构。 node组件引用自己对其子对象进行迭代。 input事件冒泡到根实例。