2019獨角獸企業重金招聘Python工程師標準>>>

結果展示

先給出兩張效果圖，左側是百度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>

總結

• 整理的有點雜亂，有空重新整理一下，并且貼出完整的代碼
• 項目總結，請多多包涵。

轉載于:https://my.oschina.net/u/3041966/blog/1608349

總結

以上是生活随笔為你收集整理的Vue 递归实现树形结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。