Vue — iview Tree组件
最后更新于：2022-04-02 08:09:15
>[success] # IView Tree 组件思路
~~~
1.一般Tree 组件需要将后台数据整合，形成嵌套关系，再将数据展示，类似菜单递归组件形式
~~~
>[danger] ##### 数据格式说明
~~~
1.Tree 的文件数据格式中
'name' -- 文件名
'creat_time' -- 创建时间
'folder_id' -- 所属文件，其中0表示是根目录，其他数字表示所属'id'字段的子目录
'id' -- 如果'id' 和'folder_id' 相同那么这个文件是当前文件的子级文件
2.文件中的内容数据格式
'name' -- 文件内容名称
'creat_time' -- 创建时间
'folder_id' -- 所属Tree 的文件数据格式 中id所对应，
简单的说'folder_id' 和'Tree' 文件id一致怎归属当前文件
'id' -- 就是文件id
~~~
* Tree 的文件数据格式
~~~
[
{
"name": "otthei",
"creat_time": "2014-07-14 19:23:47",
"folder_id": 0,
"id": 1
},
{
"name": "lyir",
"creat_time": "2002-06-04 18:54:59",
"folder_id": 0,
"id": 2
},
{
"name": "unsqw",
"creat_time": "1995-06-12 23:49:06",
"folder_id": 0,
"id": 3
},
{
"name": "bsvmckizdl",
"creat_time": "2006-07-16 06:29:44",
"folder_id": 1,
"id": 4
},
{
"name": "altbe",
"creat_time": "1996-07-23 20:49:28",
"folder_id": 2,
"id": 5
}
]
~~~
* 文件中的内容数据格式
~~~
[
{
"name": "许办交县打",
"creat_time": "2008-02-08 13:36:23",
"folder_id": 2,
"id": 10000
},
{
"name": "她很展每目",
"creat_time": "2013-03-14 01:28:58",
"folder_id": 3,
"id": 10001
},
{
"name": "团平红最气",
"creat_time": "1976-01-10 10:12:56",
"folder_id": 1,
"id": 10002
},
{
"name": "区加开步意",
"creat_time": "1972-08-27 17:51:56",
"folder_id": 2,
"id": 10003
},
{
"name": "把算米如且",
"creat_time": "1988-02-09 14:14:56",
"folder_id": 1,
"id": 10004
},
{
"name": "变界象规必",
"creat_time": "1981-09-04 01:17:51",
"folder_id": 2,
"id": 10005
},
{
"name": "就算月族克",
"creat_time": "2008-02-25 05:05:53",
"folder_id": 3,
"id": 10006
},
{
"name": "集以拉效质",
"creat_time": "2015-11-05 05:15:37",
"folder_id": 5,
"id": 10007
},
{
"name": "国器矿元新",
"creat_time": "1993-12-12 05:33:52",
"folder_id": 4,
"id": 10008
},
{
"name": "后儿类并放",
"creat_time": "1984-05-21 11:29:35",
"folder_id": 3,
"id": 10009
}
]
~~~
>[info] ## 将数据格式整理
~~~
1.需要将上面的数据进行整合，首先第一步封装一个'putFileInFolder' 方法，将
'文件中的内容数据格式'内容加到对应'文件夹名称'中
2.第二步封装一个方法'transferFolderToTree'将子目录套入到父目录中.
3.将上面两个方法封装到'lib/tool.js' 文件中
~~~
>[danger] ##### 编写putFileInFolder-- 将文件放入对应目录中
~~~
1.思路就是双层for 循环，首先循环'文件列表'，在循环'文件列表'内循环'文件内容列表'
，做判断看'文件列表'的id 是否等于'文件内容列表folder_id' 如果在则匹配成功
2.匹配成功要做的就是，在'文件列表' 中添加一个'children' 数组字段将，刚才匹配成功
的'文件内容列表'加入
3.这里有个小技巧，内层循环的内容如果匹配上相当于已经使用过了，就不会再次被其他
项匹配，因此每次匹配过的内容只要删除就行，这样就可以减少循环
~~~
~~~
export const putFileInFolder = (folderList, fileList) => {
// 将数据copy 一份防止数据污染
const folderListCloned = clonedeep(folderList)
const fileListCloned = clonedeep(fileList)
// 循环'文件列表' 用map重洗过滤
return folderListCloned.map(folderItem => {
const folderId = folderItem.id
// 获取当期'文件内容列表中的数据'长度
let index = fileListCloned.length
// 根据长度循环
while (--index >= 0) {
// 获取当前循环中的当前的 '文件列表内数据'
const fileItem = fileListCloned[index]
// 判断'文件列表内容id' 是否等于'文件内容folder_id'
if (fileItem.folder_id === folderId) {
// 如果等于 删除当前'文件内容' 的对象，利用splice 获取当前被删除对象
const file = fileListCloned.splice(index, 1)[0]
// 添加一个file.name 字段
file.title = file.name
// 判断当前是否有children 字段
if (folderItem.children) folderItem.children.push(file)
else folderItem.children = [file]
}
}
// 给所有的 '文件列表' 加上一个字段标注当前是 文件
folderItem.type = 'folder'
// 返回重新整合后的数据
return folderItem
})
}
~~~
>[danger] ##### transferFolderToTree 将文件放进各自子文件列表中
~~~
1.上一步将各个文件放入了指定的，文件归属中
2.这一步要做的就是将各个文件，根据父子级进行嵌套
3.所有的在'文件列表中的 "folder_id": 0'表示根目录，所有非'0'的 和对应的'id'
如果匹配则是父子关系
4.递归嵌套原则，这个方法实际比较的是自己的'id' 和那些 'folder_id' 相同，
但是和自己匹配的'folder_id'哪个项自己的'id'也有可能和另一个的'folder_id'
匹配，依次往下，就会形成一个爷爷套着爸爸套着儿子，直到没有相匹配的
规则，在吧这些嵌套的递归内容返回，加到所对应的根目录也就是'folder_id'
等于0
~~~
~~~
export const transferFolderToTree = folderList => {
if (!folderList.length) return []
const folderListCloned = clonedeep(folderList)
// 递归封装的方法
// 递归函数第一次调用传入默认值0，因为'folder_id'
const handle = id => {
let arr = []
// 循环在在上一步已经拼接好的'文件列表' 和'对应的文件'
folderListCloned.forEach(folder => {
if (folder.folder_id === id) {
// 递归去找 和这个当前对象id匹配的'folder_id'
// 进行合并，直到找不到相匹配的
// 将最后递归合并的内容返回塞到标记的根目录中
const children = handle(folder.id)
// 如果有'children' 就将之前'children' 中的'文件列表内数据' 和当前'文件目录子集合并'
if (folder.children) folder.children = [].concat(folder.children, children)
else folder.children = children
// 增加一个title 字段
folder.title = folder.name
// 添加到合并的数组中
arr.push(folder)
}
})
return arr
}
// 默认0是根目录因此需要 最初的递归
return handle(0)
}
~~~
>[info] ## 使用iview 的Tree 组件
~~~
1.注意使用' Promise.all([getFolderList(), getFileList()])' 可以解决地狱回调
让数据同时返回
~~~
>[danger] ##### 代码
~~~
';