一、左侧使用ul和li标签来实现菜单栏的效果
<template>
<div class="container">
<el-container>
<el-aside width="350px" class="aside">
<ul>
<li>账号注册
<ul>
<li @click='returnTop1'>企业注册</li>
<li @click='returnTop2'>用户注册</li>
</ul>
</li>
<li>密码管理
<ul>
<li>修改密码</li>
<li>忘记密码</li>
</ul>
</li>
<li>账号注册
<ul>
<li>企业注册</li>
<li>用户注册</li>
</ul>
</li>
<li>密码管理
<ul>
<li>修改密码</li>
<li>忘记密码</li>
</ul>
</li>
<li>账号注册
<ul>
<li>企业注册</li>
<li>用户注册</li>
</ul>
</li>
<li>密码管理
<ul>
<li>修改密码</li>
<li>忘记密码</li>
</ul>
</li>
<li>账号注册
<ul>
<li>企业注册</li>
<li>用户注册</li>
</ul>
</li>
<li>密码管理
<ul>
<li>修改密码</li>
<li>忘记密码</li>
</ul>
</li>
<li>账号注册
<ul>
<li>企业注册</li>
<li>用户注册</li>
</ul>
</li>
<li>密码管理
<ul>
<li>修改密码</li>
<li>忘记密码</li>
</ul>
</li>
<li>账号注册
<ul>
<li>企业注册</li>
<li>用户注册</li>
</ul>
</li>
<li>密码管理
<ul>
<li>修改密码</li>
<li>忘记密码</li>
</ul>
</li>
<li>账号注册
<ul>
<li>企业注册</li>
<li>用户注册</li>
</ul>
</li>
<li>密码管理
<ul>
<li>修改密码</li>
<li>忘记密码</li>
</ul>
</li>
</ul>
</el-aside>
<el-main class="main">
<div id="header1">
生产企业Main
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
</div>
<div id="header2">
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
2<br/>
</div>
</el-main>
</el-container>
</div>
</template>
通过el-aside标签的width属性来控制侧边栏的宽度。
ul去掉前面的点：
ul{
list-style-type: none;
}
二、侧边栏和主体区域实现滚动条效果
.aside{
height: 100vh;
overflow-y:scroll;
background-color: ghostwhite;
}
.main{
height: 100vh;
/*-webkit-overflow-scrolling: touch;*/
overflow-y:scroll;
}
注意：要有高度属性，1vh = 1%，vh表示视口高度viewpoint height；1vw = 1%，vw表示视口宽度viewpoint width，
overflow : scroll ; /*任何时候都强制显示滚动条*/ overflow : auto ; /*需要的时候会出现滚动条*/ overflow-x: auto ; /*控制X方向的滚动条*/ overflow-y: auto ; /*控制Y方向的滚动条*/
还可以使用-webkit-overflow-scrolling属性来实现滚动效果，
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
三、vue中实现锚点定位跳转
methods: {
returnTop1(){
document.querySelector("#header1").scrollIntoView(true);
},
returnTop2(){
document.querySelector("#header2").scrollIntoView(true);
}
}
其中：
document.querySelector(“要返回地方的id”).scrollIntoView(true);
HTML5选择了scrollIntoView() 作为标准方法,scrollIntoView()可以在所有的HTML元素上调用。
通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。
如果给该方法传入true作为参数，或者不传入任何参数，那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。
如果给该方法传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平）不过顶部不一定齐平。
效果如下：