Vue_3电商后台管理系统：渲染左侧菜单，获取用户列表数据

21、主页：通过双层for循环渲染左侧菜单

外层for循环用来渲染一级菜单，内层渲染for循环用来渲染二级菜单。

在一级菜单里添加v-for指令，再提供唯一的key属性。key值有id就用id。

<!-- 一级菜单 -->
<el-submenu
  v-for="item in menulist"
  :key="item.id"
>

这时候出现了五个“导航栏一”，文本都是写死的，把每个item项对应的authname属性当作名称，给span标签动态绑定名称。

<span>{
   
   {
   
    item.authName }}</span>

这样，五个菜单就都渲染出来了。

但是展开一个菜单，其他四个也都展开了。此时，需要给这个一级菜单指定唯一的index值，按照正常逻辑，每一个菜单都有独属于自己的index值，id值就是唯一的。
但是index值只接收字符串，不接收数值，可以在后面加上一个空字符串。数值和字符串拼接，得到的是字符串。

<el-submenu
  :index="item.id + ''"
  v-for="item in menulist"
  :key="item.id"
>

这样，所有的一级菜单已经渲染出来了。

根据数据结构分析，二级菜单循环所有一级菜单的children属性。

<el-menu-item :index="subItem.id + '' " v-for="subItem in item.children" :key="subItem.id">

<span>{
   
   {
   
   subItem.authName}}</span>

22、主页：修饰选项字体、添加图标

因为每个一级菜单都是通过for循环自动生成的，如何在自动生成期间修改字体图标？如何把这些字体图标按照顺序添加给一级菜单？
可以先定义一个字体图标对象：

data() {
   
   
iconsObj:{
   
   
          '125':'iconfont icon-user',
          '103':'iconfont icon-tijikongjian',
          '101':'iconfont icon-shangpin',
          '102':'iconfont icon-danju',
          '145':'iconfont icon-baobiao',
         }
      }

每循环一次会生成一个一级菜单，给一级菜单的图标动态绑定：

<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>

23、主页：每次只打开一个菜单项并解决边框问题

element-UI中的导航栏menu有这样一个属性：

unique-opened 是否只保持一个子菜单的展开 类型是布尔值，默认是false

把这个属性添加到menu上：

<el-menu
:unique-opened = "true"
>
// 也可以这样写：
<el-menu
unique-opened
>

.el-aside {
   
   
  .el-menu {
   
   
      border-right: none;
  }
}

24、主页：实现侧边栏的折叠与展开

1、先加样式，把折叠按钮显示出来。

.toggle-button {