点击显示隐藏 》

左侧菜单栏

 <div class="menuList">
 // 定义 currentMenu 若 当前菜单名 = currentMenu 则 添加active类
        <div :class="['menuItem', currentMenu === item.name ? 'active' : '']" 
             v-for="(item, index) in menuItem" 
             :key="`msg_${index}`">
          <div class="menutitle" @click="typeSelect(item)">
            <span>
                // icon图标 
                <i :class="['iconfont', `icon-${item.iconName}`, clickedType[index] ? 'active' : '']"></i>
                {{ item.name }}
           </span>
           // 右侧 展开收起箭头
            <em 
                v-show="currentMenu === item.name || item.isOpen" 
                :class="item.child && item.child.length? (item.isOpen? 'el-icon-arrow-up' : 'el-icon-arrow-right'):'el-icon-arrow-right'" 
                @click="item.isOpen = !item.isOpen">
           </em>
          </div>
          // 子标题
          <SubItem 
              @subMenuClick="subMenuClick" 
              :messageType="messageType" 
              v-if="item.isOpen && item.child && item.child.length" 
              :menu="item.child">
          </SubItem>
        </div>
      </div>

点击显示 》

给后端返回的数据增加 isOpen 属性 --- 判断是否有child

给每个标题添加自己的icon

1.new一个 iconLis 数组

2.添加 iconname 属性

3.根据 name 或者 type 属性

4.与后端返回数据进行比较

5.若相等 则 添加 iconname 属性

        name: '系统消息',
        type: '2',
        iconName: 'xitongxiaoxi1',
      }, {
        name: '公告消息',
        type: '4',
        iconName: 'tongzhi1',
      }, {
        name: '预警消息',
        type: null,
        iconName: 'jianceyujing1',
      }],

  for (const item of menu) {
            if (item.child && item.child.length) {
                item.isOpen = true // 子节点展开
            }
            this.iconLis.forEach((val) => {
              if (item.type === val.type || item.name === val.name) {
                item.iconName = val.iconName
              }
            })
          }