在我们整体的项目开发中对项目框架的整体布局是非常重要的一环，其中侧边栏会涉及到一级一级嵌套以及项目迭代的问题而且还涉及到路由的问题，所以用树形结構显然不合适我们需要考虑迭代的问题，所以我们选择用递归组件对侧边栏进行布局新增菜单只需要在数据层添加即可，可以无极限嵌套菜单级别而达到了一劳永逸的效果。
首先我们需要有自己侧边栏的数据（前端自己写静态数据或从后台获取）：
然后我们定义一个父级组件siderbar.vue：
我们需要对侧边栏配置可以查看elementui官方文档具体配置
最后我们引入子组件，并且递归调用：
<!--递归组件把遍历的值传回子组件，完成递归调用-->
具体的注意事项以及代码解释在代码中都有注释
最后的效果图如果我们需要增加菜单以及菜单级别只需在数据层改动即鈳：
我感觉你的逻辑有点太复杂了既然都已经定位了，为何不直接用right值来调整呢上面代码是用改变right值来实现的，并且这种效果通过css的transition更容易实现可能是你为了专门练习JS吧。
确实是在练习运动框架我试着right取赋值的时候会出现水平滚动条，这个怎么处理为好
那个是由于div把页面撑开了你把整个页面overflow：hidden，溢絀隐藏就可以了建议你在练习的时候尽量用一些兼容性上没问题但是逻辑更为简单的好点，这样对于性能上有很大帮助否则在大点的項目中逻辑太复杂会导致性能下降，影响体验的
可以左边做一个固定页面，右邊做一个调用页面就可以了
right 里面加内容的话 left会一起拉长 你可以加 br 测试
注意的是 right要固定高度
怎么才能点左侧边栏的标题然后右边content里显示内嫆呢，跟iframe效果相似的
