vue 类似于百度云文件夹系统

Question

vue怎么实现百度云类似的文件夹系统，可以一级一级文件夹点下去，给个思路，Demo更好>_<

Answer 1

每个文件夹的基础模型：

class Folder {
    String name;
    Array<Folder> children;
}

有需要的话，也要加上个Folder Parent的指针/引用。

如：

var files = {
    name: '最顶层',
    children: [
        {
            name: '电影',
            children: null
        },
        {
            name: '音乐',
            children: [{
                name: '杰伦',
                children: null
            }]
        }
    ]
}

<script>
export default {
    data () {
        currentFolder: files
    },
    methods: {
        next(index) {
            currentFolder = files.children[i]
        }
    }
}
</script>

<template>
    <folder-list v-if="currentFolder.children">
        <folder for="(f, i) in currentFolder.children" @click="nexe(i)">{f.name}</folder>
    </folder-list>
</template>