使用Vue在元素ui树的子代中显示嵌套文件

问题描述

我正在为我的vue应用程序使用元素ui树。我正在为我的应用程序实现“文件浏览器”类型的系统。在这里，文件嵌套在子节点中，当单击子节点时，这些嵌套的文件或文档将显示在不同容器的右侧。我无法遍历孩子并显示这些文件。

**Here is the mocked data :**

data:[{
      id: 1,name: ‘Project A’,type: ‘folder’,children: [{
        id: 4,name: 'Project A-1’,files: [
          {
            id: 9,pid: 4,name: ‘file 3-A’,type:’file’,description: ‘wifi’,country: ‘USA'
          },{
            id: 10,name: ‘file 3-B’,description: ‘VPN’,country: ‘USA'
          }
        ]
      }
      ]
    },{
      id: 2,name: 'Services’,type: 'folder',children:[],files: [
        {
          id: 5,name: ‘Services-1-A’,pid: 2,country: ‘AUS'
        },{
          id: 6,name: ‘Services-1-B’,description: ‘WIFI’,country: ‘AUS'
        }
      ]
    },{
      id: 3,name: 'Servers',type: 'folder’,files: [
        {
          id: 7,name: ‘Servers-1-A’,type: ‘file’,pid: 3,country: ‘CAD'
        },{
          id: 8,name: ‘Servers-1-B',country: ‘CAD'
        }
      ]
    }]

这是我的用户界面代码

<el-row>
                      <el-col :span="8" style="background: #f2f2f2">
                       <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">
                                  <i class="el-icon-folder" aria-hidden="true"></i>
                                  <span class="icon-folder_text" @click="showFiles(data.id)">{{ data.name }}</span>
                                 </span>
                             </span>
                         </el-tree>
                       </div>
                     </el-col>
                     <el-col :span="16"><div class="entry-content">
                      <ul>
                       <li aria-expanded="false" v-for="(file,index) in files" :key="index">
                             <div class="folder__list"><input type="checkbox" :id= "file" :value="file" v-model="checkedFiles" @click="check">
                             <i class="el-icon-document" aria-hidden="true"></i>
                             <span class="folder__name">{{file}}</span></div>
                       </li>
                     </ul>
                       </div></el-col>
                   </el-row>

显示文件方法：

showFiles(id) {
 let f = this.data.filter(dataObject => {
    if (dataObject.children && dataObject.children.id === id) {
      return false
    } else if (!dataObject.children && dataObject.id === id) {
      return false
    }
    return true
  })[0]
  this.files = f.files
}
}

我正在尝试这样做：

解决方法

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

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

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

javascript vue.js