如何用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>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<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">

      <!-- isFolder判断是否存在子级改变图标 -->

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

所以处理完之后，就是这样子的啦（echarts是后面加上去的，可以不用管）

我把代码放到github上了，大家可以下载看看（github上的代码包含了echarts，大家注意搭配我的博客看）

https://github.com/yuegreen/vueTree

官网中也有关于树组件的实现，大家可以去参考参考

https://cn.vuejs.org/v2/examples/tree-view.html

如果对本文章有什么问题和建议，欢迎在评论区讨论~

巴特西

如何用vue实现树形菜单？

最新文章

热门文章