vue element template动态菜单,elementui折叠面板默认展开
本文主要介绍以Vue3 Element-Plus为例实现左侧菜单的折叠和展开功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
:
目录
1.最终效果图2。实现左侧菜单的折叠展开功能步骤2.1首先，你要在菜单顶部放一个折叠展开按钮栏。2.2接下来绘制按钮栏的UI结构，实现折叠和展开功能。2.3单击DIV时，可以触发菜单的折叠和展开。2.4实现了折叠和展开功能，但菜单折叠时背景颜色没有变小或变大。2.5.最终效果3
1.最终实现的效果图
2. 实现左侧菜单折叠与展开功能步骤
2.1 首先应该在菜单顶部放一个折叠展开的按钮条
2.2 接下来，画按钮条UI结构，实现折叠与展开功能
1.在侧边栏内，侧边栏菜单区域之前，放置一个DIV。
2.在DIV上添加文本，并单击DIV以触发菜单折叠和展开。
3.通过类选择器向DIV添加相关的样式。切换按钮{
//添加背景色
背景色：# 4A5064
//设置文本大小
字体大小：10px
//设置文本行高
行高：24px
//设置文本颜色
颜色：# fff
//将文本设置为居中
文本对齐：居中；
//设置文本间距
字母间距：0.2厘米；
//设置鼠标悬停效果换手。
光标：指针；
}
4.添加样式后的效果
2.3 实现点击该DIV时，触发菜单折叠与展开
1.首先，需要为这个DIV按钮栏绑定click事件。
2.绑定侧栏菜单的折叠属性
collapse 属性 说明：是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
该属性默认值是 False,把该值改变 True,就可以实现折叠与展开效果了
菜单 Element Plus (gitee.io)
如上，属性绑定赋给菜单栏后，左侧菜单栏的折叠展开效果还没有生效。
3.接下来动态分配侧边栏菜单的折叠属性，实现按钮栏的click事件，使折叠和展开效果生效。
首先在数据区定义一个接受bool 变量对象
当触发DIV 点击事件时，对该bool 值对象进行动态赋值切换
修改侧边栏，动态接受bool 值
通过collapse-transition 关闭侧边栏收缩动画效果。就是左侧菜单栏收缩是，是否有动画效果。默认值是true
4.影响
2.4 折叠与展开功能是实现了，但是背景颜色并没有随着菜单折叠时跟着变小或展开时跟着变大
1.是什么原因造成的？
首先，整个红色区域是属于左侧菜单栏的，那么查看代码的UI结构时，就会发现，这个菜单侧边栏是固定写死了一个200宽度的像素。也就是说，是固定的这个宽度值，导致左侧菜单栏背景无法跟着动态折叠起来的原因。
2.只需要在判断折叠与展开时，赋不同的宽度值即可解决怎么解
也就是说，如果isCollapse 值为true（折叠） 的时候，赋值为46px （把像素值变小）。isCollapse 值为false （展开）的时候，赋值为200 px (把像素值还原)。
通过三元运算符解决
2.5. 最终效果
3. Home.vue 代码
模板
El-container class= home _ container
！-头部区域-
El-标题
差异
img src=./assets/heima.png alt= /
Span电子商务后台管理系统/span
/div
El-button type= info @ click= logout 退出/el-button
/el-header
！-页面的主要区域-
el容器
！-边栏-
El-side:width= is collapse？64px:200px
div class= toggle-button @ click= toggle collapse /div
！-侧边栏菜单区-
El-menu active-text-color= # 409 eff
background-color=#545c64
text-color= # fff unique-opened:collapse= is collapse :collapse-transition= false
！-一级菜单-
El-submenu:index= item . id v-for= item in menulist :key= item . id
！-一级菜单模板区域-
模板#标题
El-icon:class= iconsObj[item . id]/El-icon
span{{item.authName}}/span
/模板
！-次级菜单-
El-menu-item:index= subItem . id v-for= item . children中的subItem :key= subItem . id
模板#标题
el图标图标菜单//el图标
span{{subItem.authName}}/span
/模板
/El-菜单项
/El-子菜单
/el-menu
/El-旁白
！-右内容正文区域-
埃尔梅因/埃尔梅因
/El-容器
/El-容器
/模板
脚本
导出默认值{
data () {
返回{
//左侧菜单数据对象
菜单列表：[]，
//字体图标对象
iconsObj: {
125:图标字体图标-用户，
103:“icon font icon-tiji kongjian”，
101:“图标字体图标-尚品”，
102: iconfont icon-danju ，
145: icon font icon-baobao
},
//崩溃还是不崩溃？
isCollapse: false
}
},
已创建(){
this.getMenuList()
},
方法：{
注销(){
window.sessionStorage.clear()
这个。$router.push(/login )
},
//获取所有菜单数据
async getMenuList () {
const { data: res }=等待此消息。$http.get(菜单)
if (res.meta.status！==200)还这个。$message.error(res.meta.msg)
//成功，赋值。
this.menulist=res.data
console.log(res)
},
//点击按钮切换菜单的折叠和展开。
toggleCollapse () {
this.isCollapse=！这是崩溃
}
}
}
/脚本
style lang=less 范围。home_container {
身高：100%；
}。el标题{
背景色：# 363d40
//为头部设置灵活的布局。
显示器：flex
//让它的标签左右对齐
justify-content:space-between；
//清空图片左侧的填充
左填充：0；
//按钮居中
对齐-项目：居中；
//文本颜色
颜色：# fff
//设置文本字体大小
字体大小：20px
//嵌套
部门{
//灵活布局
显示器：flex
//居中垂直对齐。
对齐-项目：居中；
//使用类选择器为文本和图片添加间距
跨度{
左边距：15px
}
}
}。El-side {
背景色：# 313743；El-菜单{
右边界：无；
}
}。el-main {
背景色：# e9edf1
}。iconfont{
右边距：10px
}。切换按钮{
//添加背景色
背景色：# 4A5064
//设置文本大小
字体大小：10px
//设置文本行高
行高：24px
//设置文本颜色
颜色：# fff
//将文本设置为居中
文本对齐：居中；
//设置文本间距
字母间距：0.2厘米；
//设置鼠标悬停效果换手。
光标：指针；
}
/风格
关于Vue3 Element-Plus的左菜单折叠展开功能的例子这篇文章就到这里了。有关折叠和展开Vue3 Element-Plus左侧菜单的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。