第十八課時: Tree組件實現文件目錄-基礎實現

1. Tree組件使用

iview樹形控件要求的數據格式

data1: [
        {
            title: 'parent 1',
            expand: true,
            children: [
                {
                    title: 'parent 1-1',
                    expand: true,
                    children: [
                        {
                            title: 'leaf 1-1-1'
                        },
                        {
                            title: 'leaf 1-1-2'
                        }
                    ]
                },
                {
                    title: 'parent 1-2',
                    expand: true,
                    children: [
                        {
                            title: 'leaf 1-2-1'
                        },
                        {
                            title: 'leaf 1-2-1'
                        }
                    ]
                }
            ]
        }
    ]

1. 扁平數據樹樹狀化

扁平數據樹: 通過接口請求到文件夾的數組 folderList 和文件的數組 fileList

folderList：
[{name: "smifqwe", creat_time: "1973-07-26 06:27:55", folder_id: 0, id: 1},
{name: "gkcn", creat_time: "2001-03-27 00:42:02", folder_id: 0, id: 2},
{name: "iod", creat_time: "1971-05-15 05:10:04", folder_id: 0, id: 3},
{name: "rldt", creat_time: "1979-06-29 02:43:24", folder_id: 1, id: 4},
{name: "kuqiuwqp", creat_time: "2009-06-25 06:53:42", folder_id: 2, id: 5}]

(folder_id爲此文件夾應該放的id位置,0代表應該放在根目錄,1代表應該放在id爲1的文件夾下)

fileList:
[{name: "商定麼體平", creat_time: "1981-01-30 19:28:51", folder_id: 4, id: 10000},
{name: "分命收效集", creat_time: "2005-04-30 09:08:24", folder_id: 3, id: 10001},
{name: "立多滿步始", creat_time: "2012-04-08 22:18:17", folder_id: 4, id: 10002},
{name: "越但卻求市", creat_time: "1997-10-10 16:50:51", folder_id: 3, id: 10003},
{name: "比事期新段", creat_time: "2012-12-24 12:18:55", folder_id: 3, id: 10004},
{name: "飛情信頭南", creat_time: "2010-04-05 17:53:08", folder_id: 3, id: 10005},
{name: "織海工志什", creat_time: "1977-12-01 04:52:05", folder_id: 1, id: 10006},
{name: "向國求響者", creat_time: "2000-06-17 01:16:57", folder_id: 5, id: 10007},
{name: "九起海員兩", creat_time: "2003-12-23 14:31:44", folder_id: 3, id: 10008},
{name: "適影兒公上", creat_time: "2009-02-24 13:31:48", folder_id: 3, id: 10009}]

(folder_id爲此文件應該放在對應文件夾id下)

需要把扁平數據樹的數據轉化成iview組件可以渲染的數據

 Promise.all([getFolderList(), getFileList()]).then(res => {
      // getFolderList()、getFileList()分別得到文件夾和文件的數據，folderTree爲iview需要的數據
      this.folderTree = transferFolderToTree(putFileInFolder(res[0], res[1]))
    })
    
export const putFileInFolder = (folderList, fileList) => {
  const folderListCloned = clonedeep(folderList)
  const fileListCloned = clonedeep(fileList)
  // 循環文件夾數組
  return folderListCloned.map(folderItem => {
    // 文件夾的id
    const folderId = folderItem.id
    // 文件數組的長度
    let index = fileListCloned.length
    // 循環文件數組
    while (--index >= 0) {
      const fileItem = fileListCloned[index]
      // 當文件的folder_id 等於 文件夾的id 的時候
      if (fileItem.folder_id === folderId) {
        // 獲取滿足條件的文件
        const file = fileListCloned.splice(index, 1)[0]
        // 需要文件的title屬性
        file.title = file.name
        // 文件夾的children裏面是文件的數組
        if (folderItem.children) folderItem.children.push(file)
        else folderItem.children = [file]
      }
    }
    // 給這個文件夾加上type屬性，用來區別文件
    folderItem.type = 'folder'
    return folderItem
  })
}

export const transferFolderToTree = folderList => {
  if (!folderList.length) return []
  // 深賦值帶文件的文件夾數組
  const folderListCloned = clonedeep(folderList)
  // handle函數,傳入id,第一次傳入0,是根目錄
  const handle = id => {
    let arr = []
    folderListCloned.forEach(folder => {
      // 當文件夾的folder_id 等於 傳來的id時
      if (folder.folder_id === id) {
        // 調用handle函數，傳入文件夾的id
        const children = handle(folder.id)
        // 把滿足情況的folder放入新的數組中返回回去
        if (folder.children) folder.children = [].concat(folder.children, children)
        else folder.children = children
        folder.title = folder.name
        arr.push(folder)
      }
    })
    return arr
  }
  return handle(0)
}

1. 自定義組件結構

folder-tree.vue文件夾組件:
通過render函數來渲染出想要的樣式,如圖:

<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/util'
export default {
  data () {
    return {
      folderList: [],
      fileList: [],
      folderTree: [],
      renderFunc: (h, { root, node, data }) => {
        return (
          <div class="tree-item">
            /* 如果type 等於folder的時候，加一個文件夾的icon */
            { data.type === 'folder' ? <icon type="ios-folder" color="#2d8cf0" style="margin-right: 10px;"/> : ''}
            { data.title }
          </div>
        )
      }
    }
  },
  mounted () {
    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>