vue.js树型结构实现

参考：http://www.cnblogs.com/ychl/p/6075106.html

虽然文章给出的方法可以实现树结构，使用的图标是boostrap提供的fa类别的图标。参考文献中的代码：

父组件中引入items

<items  :model='model' v-for='model in data'></items>

以下是items.vue的内容
<template>
<li>
<div @click='toggle'>
<i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
<!--isFolder判断是否存在子级改变图标-->
<i v-if='!isFolder' class="fa fa-file-text"></i> {{model.data.menuName}}
</div>
<ul v-show="open" v-if='isFolder'>
<items v-for='cel in model.childTreeNode' :model='cel'></items>
</ul>
</li>
</template>
<script type="text/javascript">
export default {
name: 'items',
props: ['model'],
components: {},
data() {
return {
open: false,
isFolder: true
}
},
computed: {
isFolder: function() {
return this.model.childTreeNode && this.model.childTreeNode.length
}
},
methods: {
toggle: function() {
if(this.isFolder) {
this.open = !this.open
}
},
}
}
</script>

但是如果使用的话，还需要做一些修改

1. 去掉li标签

<li style="list-style-type:none;">
<div @click='toggle'>
<i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
<!--isFolder判断是否存在子级改变图标-->
<i v-if='!isFolder' class="fa fa-file-text"></i> {{model.data.menuName}}
</div>
<ul v-show="open" v-if='isFolder'>
<items v-for='cel in model.childTreeNode' :model='cel'></items>
</ul>
</li>

2. 为了使得可以选中的子节点能够返回父控件，增加交互性，需要可以让子控件能够传递给父控件数据，但是子控件是循环嵌套的，因此需要层层上传，直到父控件。

采用：子控件像父控件传送数据

<template>
<li  style="list-style-type:none;">
<div @click='toggle'>
<i v-if='isFolder' class="fa text-yellow" :class="[open?'fa-folder-open':'fa-folder']" ></i>
<!--isFolder判断是否存在子级改变图标-->
<i v-if='!isFolder' class="fa fa-file-text text-blue" ></i> {{model.data.menuName}}
</div>
<ul v-show="open" v-if='isFolder'>
<items v-for='cel in model.childTreeNode' :model='cel' @upup="change" :choose="choose"></items>
</ul>
</li>
</template>
<script type="text/javascript">
import $ from 'jquery';
var VueRouter = require('vue-router');

export default {
name: 'items',
props: ['model'],
components: {},
data() {
return {
open: false,
isFolder: true,
choose:''
}
},
computed: {
isFolder: function() {
return this.model.childTreeNode && this.model.childTreeNode.length

b347
}
},
methods: {

 change(choose){
            this.choose=choose;
              this.$emit('upup',this.choose);
        },
            toggle: function() {
                this.choose=this.model.data.menuCode;
                this.$emit('upup',this.choose);

if(this.isFolder) {
this.open = !this.open
}

},
}
}
</script>

父控件调用： 

template中：

 <items  :model='model' @upup="change" :choose="choose" v-for='model in data'></items>
{{choose}}

script中：

import items from "../../components/items.vue";
    
module.exports = {
components: {
      items
 },
data: function() {
    return {
      choose:''
}
methods: {
change(choose){
this.choose=choose;
}
}

数据类型

var data = [{
"id": "1",
"data": {
"menuName": "项目管理",
"menuCode": "",
},
"childTreeNode": [{
"data": {
"menuName": "项目",
"menuCode": "BusProject",
},
"childTreeNode": []
}, {
"data": {
"menuName": "我的任务",
"menuCode": "BusProject",
},
"childTreeNode": []
}, {
"data": {
"menuName": "人员周报",
"menuCode": "BusProject",
},
"childTreeNode": []
}]
}, {
"id": "2",
"data": {
"menuName": "数据统计",
"menuCode": "BusClock",
},
"childTreeNode": []
}, {
"id": "3",
"data": {
"menuName": "人事管理",
"menuCode": "",
},
"childTreeNode": []
}, {
"id": "4",
"data": {
"menuName": "基础管理",
"menuCode": "",
},
"childTreeNode": []
}]