如何使用vue js从文件夹结构进行文件浏览

问题描述

在我的应用程序中，有些文件夹具有树结构。在其子文件夹中，有一些文件或文档。我想在单击特定文件夹节点时显示详细信息文件。就像从文件夹目录浏览文件一样。

我想这样做。

到目前为止，我已经尝试使用如下静态数据：

data: Array<FolderStructure> [{
  id: 1,name: 'Networks',type: 'folder',children: [{
    id: 4,name: 'Networks level 1-2',children: [
      {
        id: 9,name: 'Networks-ASP-1.1',type: 'file'
      },{
        id: 10,name: 'Networks-ASP-1.2',type: 'file'
      }
    ]
  }
  ]
},{
  id: 2,name: 'Services',children: [
    {
      id: 5,name: 'Services-ASP-1.1',type: 'file'
    },{
      id: 6,name: 'Services-ASP-1.2',type: 'file'
    }
  ]
},{
  id: 3,name: 'Servers',children: [
    {
      id: 7,name: 'Servers-ASP-1.1',{
      id: 8,name: 'Servers-ASP-1.2',type: 'file'
    }
  ]
}]

代码段

<el-row style="background: #f2f2f2">
                  <el-col :span="6">
                   <div class="folder-content">
                     <el-tree
                         node-key="id"
                         :data="data"
                         accordion
                         @node-click="nodeclicked"
                         ref="tree"
                         style="background: #f2f2f2"
                         highlight-current
                         >
                         <span class="custom-tree-node" slot-scope="{ node,data }">
                             <span class="icon-folder" v-if="data.type === 'folder'">
                              <i class="el-icon-folder" aria-hidden="true"></i>
                              <span class="icon-folder_text" >{{ data.name }}</span>
                             </span>
                         </span>
                     </el-tree>
                   </div>
                 </el-col>
                 <el-col :span="12"><div class="entry-content">
                  <ul>
                      <li aria-expanded="false" v-for="(file,index) in files" :key="index">
                           <span class="folder__list"><input type="checkbox" :id= "file" :value="file">
                           <i class="el-icon-document" aria-hidden="true"></i>
                          <span class="folder__name">{{file.name}}</span></span>
                     </li>
                 </ul>
                   </div></el-col>
                 <el-col :span="6"><div class="preview_content"></div></el-col>
               </el-row>

节点点击方法

    nodeclicked(node) {
  const inputElement: any = this.$refs.tree
  let f: any = inputElement.getNode(node.id).data.children
  console.log(f)
  this.files.push(f)
}

现在，在单击文件夹节点时，我可以看到文件的详细信息，但无法迭代或将其推入数组。任何方法或建议都会有所帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）