elementplus实现左侧菜单栏收缩与展开

1.页面结构

Home.vue下包含aside.vue和menu.vue

elementplus实现左侧菜单栏收缩与展开_第1张图片

2.TAside.vue el-menu左侧菜单栏显示

注意:

  1. 要使用收缩与展开,el-aside必须设置width=“collapse”,否则收缩展开会出现收缩后,el-aside宽度不变窄
  2. 需要使用动态改变展开收缩值 :collapse=“isCollapse”
  3. @open="handleOpen"展开后改变isCollapse的值(@close="handleClose"不生效也不影响效果)
  4. :collapse-transition="false"关闭动画效果
  5. el-menu-item中的菜单项必须放在template中,且solt为title否则,展开收缩的会不包含菜单文字