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

最新推荐文章于 2025-04-28 10:01:59 发布

原创最新推荐文章于 2025-04-28 10:01:59 发布 · 2.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#SAP #nodejs #前端框架

vue 同时被 3 个专栏收录

9 篇文章

订阅专栏

SAP

5 篇文章

订阅专栏

数据双向绑定

4 篇文章

订阅专栏

本文介绍如何使用Vue实现动态树形菜单，包括顶部组件图标切换、左侧栏折叠、树形菜单显示及路由配置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果展示

前台实现

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