5.头部展示栏制作

一、基本布局

首先代码肯定是写在nav-header中。当我们完成基本布局时会发现‘面包屑’和‘用户信息’即使使用了flex，space-between也不能展开，这是因为nav-header宽度问题，设置width：100%即可。

 

 二、用户信息制作

el-dropdown el-icon el-avator

 

 

 

 使用el-dropdown-item时有一个小bug，divided会使css异常。

按照上面的方法可以实现name动态变化，正常情况下头像可应该是按照类似的方法获取，但是因为我们这里后端没有提供，所以我就自己给定了一个头像。

后面还有一些样式自己调整。

 

三、面包屑制作

 element-plus

 

 使用computed，让其跟随动态变化