如何用vue实现树形菜单？

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在公司培训了2周，布置的作业是从树形，grid分页以及echarts中选一个。由于都不是很熟，就挑了第一个。本来想在网上找找参考，然后模仿着做一个，但是网上的代码多少参差不齐，写到一半没了，所以只要自己写篇博客，记录下实现过程。

一、准备工作：

1.此次树形是用vue实现的，电脑需提前配置好node.js和vue.js，具体怎么配置，这里不作说明。

1）如果不记得自己有没有安装，可以win+R调出运行窗口，输入cmd，按enter

2)输入node -v和vue -V（注意vue中的-V是大写的）

node -v
vue -V

如果显示了版本号，则意为已安装。

2.引用奥森图标，进入官网下载包

3.需要对vue和webpack有基本的了解

一切准备就绪后，那么我们就开始吧

二、安装

1.首先在本地创建一个文件夹，命名为vue-tree，进入命令行窗口，然后进入到vue-tree文件夹所在位置

2.安装vue-cli，用cnpm更快

npm i -g vue-cli

然后创建一个webpack项目并且下载依赖

vue init webpack vue-tutorial

进入到vue-tutorial文件夹里，cd vue-tutorial

npm i

然后

npm run dev

这时我们就可以在localhost:8080中查看我们的应用了。

三、代码展示

下面进入重点啦~

1.打开你的main.js文件

然后在src/components文件夹下新建2个vue文件，同时新建一个common文件夹，在里面新增一个vue文件，具体看图（这里的font-aswesome是我下载的一个压缩包），layout负责布局展示，index负责树形展示，treeMenu负责渲染。

我们先配置好main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from './components/layout.vue'
import IndexPages from './common/index.vue'
import myTree from './components/treeMenu.vue'
Vue.use(VueRouter)
let router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: IndexPages
}
]
})/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<Layout/>',
components: { Layout }
})

2.打开layout.vue文件，开始编写（这段样式用的慕课一位讲师的）。其他的组件将在<router-view></router-view>中被渲染出来。

/**
* 页面的入口，负责页面的布局
*/<template>
<div>
<div class="app-head">
<div class="app-head-inner">
<img src="../assets/logo.png">
<div class="head-nav">
<ul class="nav-list">
<li>登录</li>
<li class="nav-pile">|</li>
<li>注册</li>
<li class="nav-pile">|</li>
<li>关于</li>
</ul>
</div>
</div>
</div> <div class="container">
<router-view></router-view>
</div> <div class="app-foot">
<p>© 2017 cindy</p>
</div>
</div>
</template><script></script>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}a {
color: inherit;
text-decoration: none;
}
body {
background: #f0f2f5;
font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
font-size: 14px;
color: #444;
}
.app-head {
background: #363636;
color: #b2b2b2;
height: 90px;
line-height: 90px;
width: 100%;
}
.app-head-inner {
width: 1200px;
margin: 0 auto;
}
.app-head-inner img {
width: 50px;
margin-top: 20px;
}
.head-nav {
float: right;
}
.head-nav ul {
overflow: hidden;
}
.head-nav li {
cursor: pointer;
float: left;
}
.nav-pile {
padding: 0 10px;
}
.app-foot {
text-align: center;
height: 80px;
width: 100%;
line-height: 80px;
background: #e3e4e8;
clear: both;
margin-top: 30px;
}
.container {
width: 1200px;
height: 470px;
margin: 0 auto;
}
ul li {
padding-left: 10px;
}</style>

3.打开index.vue文件，代码如下，树形主要在<ul v-for="menuItem in theModel"> <myTree class="item" :model="menuItem"></myTree> </ul>实现。

/**
* 树形和echarts的展示
*/
<template>
<div class="index-wrap">
<div class="index-left">
<div class="index-left-block">
<h2>树形侧边导航栏</h2>
<ul v-for="menuItem in theModel">
<myTree class="item" :model="menuItem"></myTree>
</ul>
</div>
</div>
<div class="index-right">
<div class="index-right-block">
</div>
</div>
</div>
</template><script>
import myTree from '../components/treeMenu.vue'var myData =[{
'id': '1',
'menuName': 'echarts',
'menuCode': '10',
'children': [
{
'menuName': '地图',
'menuCode': '11',
},
{
'menuName': '柱状图',
'menuCode': '12',
'children': [
{
'menuName': '交错正负轴标签',
'menuCode': '121'
},
{
'menuName': '柱状图框选 ',
'menuCode': '122'
},
{
'menuName': '堆叠柱状图',
'menuCode': '124'
}]
},
{
'menuName': '条形图',
'menuCode': '13'
}]
},
{
'id': '2',
'menuName': '树形结构',
'menuCode': '21'
},
{
'id': '3',
'menuName': 'gird分页',
'menuCode': '30'
}]export default {
name: 'items',
props: ['model'],
components: {
myTree
},
data () {
return {
theModel: myData
}
}
}
</script><style scoped>
.index-wrap {
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.index-left {
float: left;
width: 300px;
text-align: left;
}
.index-right {
float: left;
width: 900px;
}
.index-left-block, .index-right-block{
height: 450px;
margin: 15px;
background: #fff;
box-shadow: 0 0 1px #ddd;
}.index-left-block h2,.index-right-block h2 {
background: #4fc08d;
color: #fff;
padding: 20px 20px;
font-size: 1.5em;
}.item {
cursor: pointer;
}
ul{
line-height: 40px;
list-style-type: dot;
}li div:active,li div:hover {
background: #9FDABE;
color: #eee;
}ul li:hover {
background: #A6C2B0;
}</style>

4.最重要的一个文件：treeMenu.vue。这个文件里有用到font-awesome，需要大家自行去官网下载。然后将压缩包解压后，放到src的下面。我将文件夹重名为“font-awesome”，然后在<script></script>标签里引用import '../font-awesome/css/font-awesome.min.css'。

/**
* 树的组件，主要功能在这里实现
*
*/
<template> <li>
<div @click="toggle" @dblclick="changeType">

<i v-if="isFolder"uk-animation-="" class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>

<i v-if="!isFolder" class="fa fa-file-image-o"></i>
{{ model.menuName }}
<i v-if="isFolder" class="fa " :class="[open ? 'fa-chevron-down' : 'fa-chevron-right']" style="display: inline-block;float: right;padding:13px 20px 0 0;"></i>
</div> <ul v-show="open" v-if="isFolder">
<tree-menu v-for="item in model.children" :model="item"></tree-menu>
<li class="add" @click="addChild">
<i class="fa fa-plus-square-o" style="padding-left: 20px;">
<i style="display: inline-block;padding-left: 20px;">add</i>
</i>
</li>
</ul>
</li>
</template><script>
import '../font-awesome/css/font-awesome.min.css'
import Vue from 'vue'
export default {
name: 'treeMenu',
props: ['model'],
data() {
return {
open: false,
}
},
computed: {
isFolder:function() {
return this.model.children && this.model.children.length
}
},
methods: {
toggle: function() {
if(this.isFolder) {
this.open = !this.open
}
},
changeType: function() {
if(!this.isFolder) {
Vue.set(this.model,'children',[])
this.addChild()
this.open = true
}
},
addChild: function() {
this.model.children.push({
name:'new stuff'
})
}
}
}
</script><style scoped>ul {
line-height: 40px;
list-style-type: dot;
}
li div:active,li div:hover {
background: #9FDABE;
color: #eee;
}ul li:hover {
background: #A6C2B0;
}.fa-folder-open, .fa-folder, .fa-file-image-o { padding:0 20px;
}</style>