vue横向树结构_Vue 递归实现树形结构

结果展示

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

项目中假设为后台管理系统，一般左侧导航都是树形递归，当然现在也有很多的UI框架，随便套一下也是可以用的；

楼主这里要总结的是vue组件化的时候，当前树形结构组件自行调用；

仅供项目总结，如有不对的地方，请多多包涵。

代码结构

mTree.vue

:class="{'active':model.path === this.$route.params.filePath}">

@click="toggle(model)"

:class="{'item-hover': model.type === 'file'}">

{{ model.name }}

class="item-icon"

:class="{'openmenu': open}"

v-if="model.type !== 'file'">

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');

}

}

}

}

.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;

}

}

}

}

mDemo.vue

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;

}

}

}

}

总结

整理的有点杂乱，有空重新整理一下，并且贴出完整的代码

项目总结，请多多包涵。