树形菜单是开发后台管理系统都绕不过的一个需求，也是各种UI框架都必须具备的组件。实际开发中，大多数时候都是直接拿别人的轮子过来用，但作为一个有追求的程序猿怎么能不知道轮子背后的东西呢？今天，我就基于Vue用两种方式来实现树形菜单。

准备工作

Vue开发环境

父组件.png

树形结构的数据

data: [

{

name: 'home',

path: '/home',

isExpand: false,

meta: { text: '首页' }

},

{

name: 'manage',

path: '/manage',

isExpand: false,

meta: {text: '系统管理'},

children: [

{

name: 'staff',

path: 'staff',

isExpand: false,

meta: {text: '员工管理'}

},

{

name: 'role',

path: 'role',

isExpand: false,

meta: {text: '角色管理'}

},

{

name: 'auth',

path: 'auth',

isExpand: false,

meta: {text: '权限管理'}

},

{

name: 'daily',

path: 'daily',

isExpand: false,

meta: {text: '日常管理'},

children: [

{

name: 'attendance',

path: 'attendance',

isExpand: false,

meta: {text: '考勤管理'},

},

{

name: 'performance',

path: 'performance',

isExpand: false,

meta: {text: '绩效管理'}

}

]

}

]

},

{

name: 'finance',

path: '/finance',

isExpand: false,

meta: {text: '财务管理'},

children: [

{

name: 'income',

path: 'income',

isExpand: false,

meta: {text: '收入管理'},

},

{

name: 'expense',

path: 'expense',

isExpand: false,

meta: {text: '支出管理'},

}

]

}

]

两种实现

1、递归组件

// 子组件

• @click="handleClick(item)">{{item.meta.text}}

export default {

name: 'TreeOne',

props: {

treeData: {

type: Array,

default: () => {

return []

}

}

},

methods: {

handleClick(){}

}

}

2、render函数

// 子组件

import img1 from '../assets/img/icon_arrow_right.png'

import img2 from '../assets/img/icon_arrow_down.png'

export default {

name: 'TreeTwo',

props: {

treeData: {

type: Array,

default: () => {

return []

}

}

},

render(r){

return this.elements(this.treeData,r)

},

methods: {

elements(data,r){

return r('ul',[

data.map(item => {

if (item.children && item.children.length > 0) {

return r('li',{

'class': {

active: !(item.children && item.children.length > 0)

}

},[

r('span',{

'class':'item'

},[

r('span',{

'class': 'icon',

on:{

click: () => {

item.isExpand = !item.isExpand

}

}

},[

r('img',{

attrs: {

src: item.children && item.children.length > 0 && !item.isExpand ?

img1 : (item.children && item.children.length > 0 && item.isExpand ? img2 : '')

}

})

]),

r('span',{

'class': 'title',

on: {

click: () => {

}

}

},item.meta.text,)

]),

// 递归调用

item.isExpand ? this.elements(item.children,r): null

])

} else {

return r('li',item.meta.text)

}

})

])

}

}

}

实现效果

效果.png

以上就是用两种方式实现的树组件，重点在于递归的思想，希望对读者有所帮助。详情可以查看源代码：源码