最近看了 Vue.js 的递归组件，实现了一个最基本的树形菜单。

项目结构：

main.js 作为入口，很简单：

import Vue from 'vue'

Vue.config.debug = true

import main from './components/main.vue'

new Vue({

el: '#app',

render: h => h(main)

})

它引入了一个组件 main.vue：

var myData = [

{

'id': '1',

'menuName': '基础管理',

'menuCode': '10',

'children': [

{

'menuName': '用户管理',

'menuCode': '11'

},

{

'menuName': '角色管理',

'menuCode': '12',

'children': [

{

'menuName': '管理员',

'menuCode': '121'

},

{

'menuName': 'CEO',

'menuCode': '122'

},

{

'menuName': 'CFO',

'menuCode': '123'

},

{

'menuName': 'COO',

'menuCode': '124'

},

{

'menuName': '普通人',

'menuCode': '124'

}

]

},

{

'menuName': '权限管理',

'menuCode': '13'

}

]

},

{

'id': '2',

'menuName': '商品管理',

'menuCode': ''

},

{

'id': '3',

'menuName': '订单管理',

'menuCode': '30',

'children': [

{

'menuName': '订单列表',

'menuCode': '31'

},

{

'menuName': '退货列表',

'menuCode': '32',

'children': []

}

]

},

{

'id': '4',

'menuName': '商家管理',

'menuCode': '',

'children': []

}

];

import myTree from './common/treeMenu.vue'

export default {

components: {

myTree

},

data() {

return {

theModel: myData

}

}

}

该文件引入了树形组件 treeMenu.vue：

{{ model.menuName }}

export default {

name: 'treeMenu',

props: ['model'],

data() {

return {

open: false,

isFolder: true

}

},

computed: {

isFolder: function() {

return this.model.children && this.model.children.length

}

},

methods: {

toggle: function() {

if (this.isFolder) {

this.open = !this.open

}

}

}

}

ul {

list-style: none;

}

i.icon {

display: inline-block;

width: 15px;

height: 15px;

background-repeat: no-repeat;

vertical-align: middle;

}

.icon.folder {

background-image: url(/src/assets/folder.png);

}

.icon.folder-open {

background-image: url(/src/assets/folder-open.png);

}

.icon.file-text {

background-image: url(/src/assets/file-text.png);

}

.tree-menu li {

line-height: 1.5;

}

就这么简单。这篇文章还真没什么可写的，权当记录吧。

截图效果如下：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！