[英]iterate nested children and display data using vuejs and javascript
I have treeview folder structure with nested children.我有带有嵌套子级的 treeview 文件夹结构。 There are some file objects nested into children.
有一些文件对象嵌套在子项中。 I want to display those files details based on node using vue and javascript.
我想使用 vue 和 javascript 根据节点显示这些文件的详细信息。 Here is the mocked data:
这是模拟的数据:
data:[{
id: 1,
name: ‘Project A’,
type: ‘folder’,
children: [{
id: 4,
name: 'Project A-1’,
type: ‘folder’,
files: [
{
id: 9,
pid: 4,
name: ‘file 3-A’,
type:’file’,
description: ‘wifi’,
country: ‘USA'
},
{
id: 10,
pid: 4,
name: ‘file 3-B’,
type:’file’,
description: ‘VPN’,
country: ‘USA'
}
]
}
]
},
{
id: 2,
name: 'Services’,
type: 'folder',
children:[],
files: [
{
id: 5,
name: ‘Services-1-A’,
type:’file’,
pid: 2,
description: ‘VPN’,
country: ‘AUS'
},
{
id: 6,
name: ‘Services-1-B’,
type:’file’,
pid: 2,
description: ‘WIFI’,
country: ‘AUS'
}
]
},
{
id: 3,
name: 'Servers',
type: 'folder’,
children:[],
files: [
{
id: 7,
name: ‘Servers-1-A’,
type: ‘file’,
pid: 3,
description: ‘VPN’,
country: ‘CAD'
},
{
id: 8,
name: ‘Servers-1-B',
type: ‘file’,
pid: 3,
description: ‘WIFI’,
country: ‘CAD'
}
]
}]
UI CODE :用户界面代码:
<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" @click="showFiles(node.id) >{{ 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>
method:方法:
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
})[1]
this.files = f.files
console.log(this.files)
}
I want to get those file details if traverse through deep children.如果遍历深层孩子,我想获取这些文件详细信息。 If i click children folder 'Project A-1' then i want to display those files inside that children.
如果我单击子文件夹“Project A-1”,那么我想在该子文件夹中显示这些文件。 I have tried to filter out but it is displaying only root folder files if any.
我试图过滤掉,但它只显示根文件夹文件(如果有的话)。 I am not able to display nested files inside children.
我无法在子级中显示嵌套文件。
I am getting whole node details with prototype instead of files我正在使用原型而不是文件获取整个节点详细信息
How to iterate those and display?如何迭代这些并显示?
I believe this is what you are looking for.我相信这就是您正在寻找的。 I have written comments in the code to explain my thought process.
我在代码中写了注释来解释我的思考过程。
showFiles(id) { for (const dataObject of this.data) { if (this.dataObject.children && this.dataObject.children.id === id) { // check if file has children and if the child id is the same as the id. If it is, the files are the files of the nested child this.files = this.dataObject.children.files; break; } if (.this.dataObject.children && this.dataObject,id === id) { // if the data object does not have children and the id is the same as the id being looked for. the file is the root folder this.files = this.dataObject;files; break; } } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.