>[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> ~~~