1. 先处理最简单的
原始数据大概是这样:
let fileArr = [
{
progress: 100,
status: '成功',
type: '通号',
webkitRelativePath: "六捷数据2023-05-04 163909/G163/Abis口详细信息_(G163)(380BL3544-0)(14984173988)(2018-01-24 174431.0740—2018-01-24 180347.9070).xls"
},
{
progress: 100,
status: '成功',
type: '通号',
webkitRelativePath: "六捷数据2023-05-04 163909/G163/A口详细信息_(G163)(380BL3544-0)(14984173988)(2018-01-24 174431.4760—2018-01-24 180346.8490).xls"
},
{
progress: 100,
status: '成功',
type: '六捷',
webkitRelativePath:'六捷数据2023-05-04 163909/DJ5908 (2022-11-16)/PRI接口/PRI 信令(14985174166).xlsx'
},
{
progress: 100,
status: '成功',
type: '六捷',
webkitRelativePath: '六捷数据2023-05-04 163909/DJ5908 (2022-11-16)/A接口/A 呼叫记录.xlsx'
},
{
progress: 100,
status: '成功',
type: '六捷',
webkitRelativePath: '六捷数据2023-05-04 163909/DJ5908 (2022-11-16)/Abis接口/Abis 信令(14985174166).xlsx'
},
{
progress: 100,
status: '成功',
type: '六捷',
webkitRelativePath: '六捷数据2023-05-04 163909/DJ5908 (2022-11-16)/Abis接口/Abis 呼叫记录.xlsx'
},
{
progress: 100,
status: '成功',
type: '无',
webkitRelativePath: '六捷数据2023-05-04 163909/dahhdahadab.xls'
}
]处理方法：
let oraginArr = fileArr.map(v => ({ path: v.webkitRelativePath.split("/"), type: v.type, status: v.status, progress: v.progress}))
function genDirTree(arr){
let result = []
if(arr.length === 0) return []
let treeRoots =[...new Set(arr.map(v => v.path[0])) ]
if(treeRoots.length === 0) return
treeRoots.map((v, i) =>{
let temp = {
name: v
}
let children = []
arr.map((value, j) => {
if(value.path && value.path[0] === v){
let tempV = [...value.path]
tempV.shift()
if(tempV.length>0){
children.push({ path: tempV, status: value.status, type: value.type, progress:value.progress})
}
temp.status = value.status
temp.type = value.type
temp.progress = value.progress
}
})
if(children.length > 0){
temp.children = genDirTree(children)
}
result.push(temp)
} )
return result
}
genDirTree(oraginArr)
console.log('genDirTree:', genDirTree(oraginArr))打印结果：
效果图展示：
全部代码如下:
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="name"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="name" label="文件名" min-width="500"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column prop="type" label="厂家类型"></el-table-column>
<el-table-column prop="webkitRelativePath" label="原始文件名"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [],
fileArr: [
{
progress: 100,
status: '成功',
type: '通号',
webkitRelativePath: "六捷数据2023-05-04 163909/G163/Abis口详细信息_(G163)(380BL3544-0)(14984173988)(2018-01-24 174431.0740—2018-01-24 180347.9070).xls"
},
{
progress: 100,
status: '成功',
type: '通号',
webkitRelativePath: "六捷数据2023-05-04 163909/G163/A口详细信息_(G163)(380BL3544-0)(14984173988)(2018-01-24 174431.4760—2018-01-24 180346.8490).xls"
},
{
progress: 100,
status: '成功',
type: '六捷',
webkitRelativePath:'六捷数据2023-05-04 163909/DJ5908 (2022-11-16)/PRI接口/PRI 信令(14985174166).xlsx'
},
{
id: 226,
progress: 100,
status: '成功',
type: '六捷',
webkitRelativePath: '六捷数据2023-05-04 163909/DJ5908 (2022-11-16)/A接口/A 呼叫记录.xlsx'
},
{
progress: 100,
status: '成功',
type: '六捷',
webkitRelativePath: '六捷数据2023-05-04 163909/DJ5908 (2022-11-16)/Abis接口/Abis 信令(14985174166).xlsx'
},
{
progress: 100,
status: '成功',
type: '六捷',
webkitRelativePath: '六捷数据2023-05-04 163909/DJ5908 (2022-11-16)/Abis接口/Abis 呼叫记录.xlsx'
},
{
progress: 100,
status: '成功',
type: '无',
webkitRelativePath: '六捷数据2023-05-04 163909/dahhdahadab.xls'
}
]
}
},
methods: {
genDirTree(arr) {
let result = []
if (arr.length === 0) return []
let treeRoots = [...new Set(arr.map(v => v.path[0]))]
if (treeRoots.length === 0) return
treeRoots.map((v, i) =>{
let temp = {
name: v
}
let children = []
arr.map((value, j) => {
if (value.path && value.path[0] === v) {
let tempV = [...value.path]
tempV.shift()
if (tempV.length > 0) {
children.push({ path: tempV, status: value.status, type: value.type, progress: value.progress})
} else {
// 最后文件一层 push 其他变量
temp.status = value.status
temp.type = value.type
temp.progress = value.progress
}
}
})
if (children.length > 0) {
temp.children = this.genDirTree(children)
}
result.push(temp)
})
return result
}
},
created() {
let oraginArr = this.fileArr.map(v => ({ path: v.webkitRelativePath.split("/"), type: v.type, status: v.status, progress: v.progress}))
console.log('oraginArr:', oraginArr)
console.log('genDirTree:', this.genDirTree(oraginArr))
this.tableData = this.genDirTree(oraginArr)
},
mounted() {
}
}
</script>
