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

如何解决使用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
}
}

我正在尝试这样做：

解决方法

我注意到您的过滤器功能存在错误。检查第3行：

showFiles(id) {
 let f = this.data.filter(dataObject => {
     //isn't this suppose to return true?
    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
}

为什么使用filter()方法搜索单个元素？它将扫描所有元素。您可以只使用find()来提高性能和更好的可读性。 试试这个：

showFiles(id) {
    let f = this.data.find(dataObject => dataObject.id == id);
   //ensure node was returned
   if(f ){
     this.files = f.files
   }
}

但是，您可以尝试在组件中执行此操作。 将另一个属性添加到组件的数据对象。使用new属性保留选定的节点。

  data(){
      //your mock data
      tree:[],//children files being displayed
      files:[]
    
  },methods:{
      showFiles(branch){
           this.files = branch.files;
      }
  }

然后将整个对象传递给方法

<span class="icon-folder_text" @click="showFiles(data)">{{ data.name }}</span>