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

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

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

今天给大家分享,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组件

 

 

 

 

 

 

 

 

### Vue3 和 Element Plus 实现 Aside 左侧导航折叠效果 以下是基于 Vue3 和 Element Plus 的左侧导航折叠功能的实现方法: #### 1. 安装依赖 首先需要安装 `element-plus` 库,可以通过 npm 或 yarn 进行安装。 ```bash npm install element-plus --save ``` 或者 ```bash yarn add element-plus ``` #### 2. 配置项目引入 Element Plus 在项目的入口文件(通常是 main.js 或 main.ts 中),全局注册 Element Plus 并按需加载样式。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` #### 3. 编写模板结构 创建一个包含左侧导航和右侧主要内容区域的基础布局。通过绑定动态属性控制菜单的展开/收起状态。 ```html <template> <div class="container"> <!-- 头部 --> <header>Header</header> <!-- 主体部分 --> <section class="main-section"> <!-- 左侧导航 --> <aside :class="{ collapse: isCollapse }"> <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" > <el-submenu index="1"> <template #title> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group title="分组一"> <el-menu-item index="1-1">选项一</el-menu-item> <el-menu-item index="1-2">选项二</el-menu-item> </el-menu-item-group> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <template #title>导航二</template> </el-menu-item> </el-menu> </aside> <!-- 右侧内容区 --> <main> <button @click="toggleSidebar">切换侧边</button> Content Area </main> </section> </div> </template> ``` #### 4. 添加逻辑处理 定义数据模型用于存储当前菜单的状态,并提供相应的方法来触发菜单的折叠或展开操作。 ```javascript <script> export default { data() { return { isCollapse: false, // 控制菜单是否折叠,默认不折叠 }; }, methods: { handleOpen(key, keyPath) { console.log('打开菜单项:', key, keyPath); // 打印被打开的菜单路径 }, handleClose(key, keyPath) { console.log('关闭菜单项:', key, keyPath); // 打印被关闭的菜单路径 }, toggleSidebar() { this.isCollapse = !this.isCollapse; // 切换菜单折叠状态 }, }, }; </script> ``` #### 5. 设置样式调整视觉表现 为了使界面更加美观和谐统一,在 CSS 文件中加入自定义样式规则。 ```css <style scoped> .container { display: flex; flex-direction: column; } .main-section { display: flex; height: calc(100vh - 60px); /* 减去头部高度 */ } aside { transition: width 0.3s ease-in-out; overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; } .collapse { width: 64px !important; } .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style> ``` 以上代码实现左侧导航支持手动折叠的功能[^1],并提供了按钮交互以改变其显示模式[^2]。 #### 注意事项 当设置 `collapse` 属性为 true 后,子节点中的文字会被隐藏掉仅保留图标;如果希望即使处于收缩状态下也能看到完整的标题,则可以考虑额外增加悬浮提示或其他形式补充说明信息[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值