结果展示

先给出两张效果图，左侧是百度Echarts的文档中心截图，右侧是我个人结合项目中文档中心截图

• 项目中假设为后台管理系统，一般左侧导航都是树形递归，当然现在也有很多的UI框架，随便套一下也是可以用的；
• 楼主这里要总结的是vue组件化的时候，当前树形结构组件自行调用；
• 仅供项目总结，如有不对的地方，请多多包涵。

代码结构

• mTree.vue

    <template><li class="tree-items":class="{'active':model.path === this.$route.params.filePath}"><a class="item-title"@click="toggle(model)":class="{'item-hover': model.type === 'file'}">{{ model.name }}<spanclass="item-icon":class="{'openmenu': open}"v-if="model.type !== 'file'"></span></a><ul v-show="open" v-if="model.type === 'directory'" class="child-list-box"><m-tree v-for="item in model.files" :model="item" :key="item.name"></m-tree></ul></li>
</template><script>export default {name: 'mTree',props: ['model', 'index'],data() {return {open: true}},methods: {toggle: function (model) {let self = this;if (model.type === "directory") {this.open = !this.open;} else {console.log('file');}}}}
</script><style lang="less">.tree-items {margin: 8px 0 0 0;padding: 3px;color: #575d6f;border-radius: 5px;cursor: pointer;user-select: none;&.active {.item-title {color: #1357ba;}}&.onHitClass {background-color: #dbdce0;}.item-title {line-height: 1px;font-size: 16px;font-weight: bold;color: #575d6f;&.item-hover {&:hover {color: #1357ba;}}}.item-icon {display: inline-block;transform: rotate(-180deg);margin-left: 12px;width: 7px;height: 7px;background: url('三角形的图片.png') no-repeat center;transition: all .3s;&.openmenu {transform: rotate(0deg);}}.child-list-box {padding-left: 17px;.tree-items {margin: 5px 0;color: #666;text-decoration: none;display: block;font-weight: 300;padding: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;.item-title {font-size: 14px;margin-bottom: 12px;font-weight: normal;}}}}
</style>

• mDemo.vue

<template><div class="doc-center-wrap"><div class="doc-center-slide"><div class="doc-center-searbox"><span class="doc-center-searimg"></span><Input size="large" placeholder="请输入关键字" @on-keyup="searchKeywords" v-model="keywords"/></div><div class="doc-center-tree" id="tree-slide"><ul class="tree-menu-ul" v-for="(menuItem, index) in treeModel" :key="index"><m-tree :model="menuItem" :index="index"></m-tree></ul></div></div></div>
</template><script>import MTree from "./mTree.vue";let data =  [{"type": "file","name": "前端框架","path": "about"}, {"type": "file","name": "前端框架","path": "guide"}, {"type": "file","name": "前端框架","path": "zip-guide"}, {"type": "file","name": "UI模块引擎","path": "remote-debugging"},{"type": "directory","name": "云API","files": [{"type": "file","name": "数据云API","path": "component-album"}, {"type": "file","name": "数据云API","path": "component-app"}]}
]  let fileFrist = [];function showFristFile(data) {for (let i in data) {let fileModel = data[i];if (fileModel.type === "file") {fileFrist.push(fileModel);} else {showFristFile(fileModel.files);}}return fileFrist;}export default {data(){return {treeModel:   data,retrievalWords: showFristFile(data),keywords:''}},components: {MTree},methods:{searchKeywords() {let self = this;let retrievalWords = self.retrievalWords;let keywords = self.keywords;if (!keywords) {self.treeModel= self.treeModel;} else {let arrKeywords = [];for (let i = 0; i < retrievalWords.length; i++) {if (retrievalWords[i].name.toLowerCase().indexOf(keywords.toLowerCase()) !== -1) {arrKeywords.push(retrievalWords[i]);}}self.treeModel = arrKeywords;}}}}
</script>

总结

• 整理的有点杂乱，有空重新整理一下，并且贴出完整的代码
• 项目总结，请多多包涵。