>[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] ##### 代码 ~~~ <template> <div class="folder-wrapper"> <Tree :data="folderTree" :render="renderFunc"></Tree> </div> </template> <script> import { getFolderList, getFileList } from '@/api/data' import { putFileInFolder ,transferFolderToTree} from '@/lib/tools' export default { data () { return { folderList: [], fileList: [], folderTree: [], renderFunc: (h, { root, node, data }) => { return ( <div class="tree-item"> { data.type === 'folder' ? <icon type="ios-folder" color="#2d8cf0" style="margin-right: 10px;"/> : ''} { data.title } </div> ) } } }, mounted () { // getFileList().then(res=>{ // console.log(res) // }) // getFolderList().then(res=>{ // console.log(res) // }) Promise.all([getFolderList(), getFileList()]).then(res=>{ this.folderTree = transferFolderToTree(putFileInFolder(res[0], res[1])) }) } } </script> <style lang="less"> .folder-wrapper{ width: 300px; .tree-item{ display: inline-block; width: ~"calc(100% - 50px)"; height: 30px; line-height: 30px; } } </style> ~~~