vue实现动态树与左侧栏折叠效果

今天给大家分享，vue实现动态树的案例。

目录

前台实现

1.顶部组件显示折叠或展示图标

2.实现左侧栏折叠效果

3.显示树形菜单

 4.配置树形菜单路由

注意事项

---

效果展示

 

前台实现

1.顶部组件显示折叠或展示图标

监听折叠按键的click事件，并将折叠或打开的状态值。

 script模块

export default {
    //定义组件名称
    name:'TopNav',

    data: function() {
      return {
        //默认展示侧边栏
        opened:true,

        //require是node中遵循CommonJS规范的模块化解决方案,支持动态引入
        imgshow: require('../assets/img/show.png'),
        imgsq: require('../assets/img/sq.png')
      }
    }
}

添加方法 

2.实现左侧栏折叠效果

• TopNav.vue定义监听函数，监听折叠按键的click事件，并将折叠或打开的状态值。
• 通过自定义事件，将TopNav子组件的opened属性传给Mian父组件
• Main组件根据状态值设置打开或折叠的样式，并将状态值通过props传递给LeftAside组件 

如果opened为ture就让它隐藏，如果opened为false就让他显示

 

LeftAside.vue组件通过接收到的状态值设置自身的打开或折叠效果。

通过监听属性方式，进行控制状态值 

 

3.显示树形菜单

在src/api/action.js中配置获取动态树数据的请求路径

export default {
	'SERVER': 'http://localhost:8080/', //服务器

	'SYSTEM_USER_DOLOGIN': 'usermsg/login', //登陆

	'SYSTEM_MODULE_REQ': '/meun', //树型菜单


  //获取完整的请求地址
	'getFullPath': (k) => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}

}

首页显示使用钩子函数，页面加载进来的时候调用。显示树形菜单

moduleDatas保存后台的树形菜单值，使用双向数据绑定的方式绑定modeleDatas属性

 

 4.配置树形菜单路由

创建book文件，在它的目录下创建BookList页面

在index.js中配置路由 

import BookList from '@/views/book/BookList.vue'
import AddBook from '@/views/book/AddBook.vue'
import Home from '../views/Home.vue'

注意事项

显示二级菜单时， 需要修改LeftAside组件