-
现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神们的作品又比较复杂,对于初学者来说理解起来还是有难度,自己捣鼓了几天,勉强理解了递归组件菜单的实现,这里结合官网的案例,把代码和注释附上.
-
如果你的项目是element-ui,其实它里面也有提供树形菜单,但是由于是别人封装的,所以使用起来没那么方便,大多数还是会自己配置,好了,不说那么多,还是回到递归组件上来吧
- 先来看一下菜单的最终效果,有+号的都是可以点击展开的
-
首先看一下项目的目录,在后台菜单数据没拿到之前,这里先演示一个模拟数据的,先在SRC文档下建一个data存放菜单数据.按照菜单层级关系写 数据里设置menuLevel是为了配置路由的,值是组件的名字
-
接着创建两个组件,一个是菜单父组件,一个是递归的子组件,父组件代码:
-
- 子组件代码,html部分:
-
{ { model.name }} [{ { open ? '-' : '+' }}]子组件代码,js部分:
-
// 引入子组件import submenu from './submenu'export default { components: { submenu }, name: 'submenu', props: { model: Object }, data: function () { return { open: false } }, computed: { // 是否展示+图标 isFolder: function () { return this.model.children && this.model.children.length } }, methods: { // 单击展示子菜单 toggle: function () { if (this.isFolder) { this.open = !this.open } }, // 双击给当前单一不可展开的菜单添加children,变成可展开样式 changeType: function () { if (!this.isFolder) { // Vue.set(this.model, 'children', []) this.$set(this.model, 'children', []) this.addChild() this.open = true } }, // 给子菜单添加内容 addChild: function () { this.model.children.push({ name: 'new stuff' }) } }}路由配置,这里的name和data数据里的menuLevel一样:
-
import Vue from 'vue'import Router from 'vue-router'// import OnePage from '@/components/OnePage/OnePage'// 引入菜单组件import treeMenu from '@/components/menu/treeMenu'// 引入一级菜单import one from '@/components/one/one'// 引入二级菜单import two from '@/components/two/two'// 引入三级菜单import three from '@/components/three/three'Vue.use(Router)export default new Router({ routes: [ // { // path: '/', // name: 'OnePage', // component: OnePage // } { path: '/', name: 'treeMenu', component: treeMenu }, { path: '/one', name: 'one', component: one }, { path: '/two', name: 'two', component: two }, { path: '/three', name: 'three', component: three } ]})这样一个树形菜单就大致完成了,配置了路由的也可以跳转到相应页面,如果菜单数据是后台给你的,数据只要和你一开始设置data数据格式一样就可以直接用了