element导航菜单控制当前菜单样式

Posted 2021-02-09 xiaomg

直接使用Element的导航菜单组件，参考官方文档：http://element-cn.eleme.io/#/zh-CN/component/menu

问题1：设置当前的导航样式，直接使用自带属性控制就可以。

<el-menu :default-active="$route.path"
         :unique-opened="true"
         class="el-menu-demo"
         @select="handleSelect"
         background-color="rgba(0,0,0,0)"
         text-color="#fff"
         active-text-color="#ffd04b"
>
  <el-submenu index="1">
    <template slot="title">
      <!--<i class="el-icon-location"></i>-->
      <img src="/static/images/icon/ic1.png"  class="ic-pic">
      <span>运营中心</span>
    </template>
    <el-menu-item-group>
      <el-submenu index="1-1">
        <template slot="title">
          <span>审核中心</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="../index/auditHistory">
            技术员审核
          </el-menu-item>
          <el-menu-item index="1-2">维保圆审核</el-menu-item>
          <el-menu-item index="/index/propertyList">物业公司审核</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/operation/businessList">业务列表</el-menu-item>
    </el-menu-item-group>
  </el-submenu>

  <el-submenu index="2">
    <template slot="title">
      <!--<i class="el-icon-location"></i>-->
      <img src="/static/images/icon/ic2.png"  class="ic-pic">
      <span>电梯管理</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="/ElevatorManagement">
        统计看板
      </el-menu-item>
      <el-menu-item index="2-2">维保数据</el-menu-item>
      <el-menu-item index="">警报数据</el-menu-item>
      <el-menu-item index="/ElevatorManagement/ElevatorList">列表查看</el-menu-item>
    </el-menu-item-group>
  </el-submenu>
  <el-submenu index="8">
    <template slot="title">
      <!--<i class="el-icon-location"></i>-->
      <img src="/static/images/icon/ic1.png"  class="ic-pic">
      <span>广告管理</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="/advertisement/advertiserList">
        广告列表
      </el-menu-item>
      <el-menu-item index="/advertisement/">广告设置</el-menu-item>
    </el-menu-item-group>
  </el-submenu>
  <el-menu-item index="9">
    <img src="/static/images/icon/ic8.png"  class="ic-pic">
    <span slot="title">大数据中心</span>
  </el-menu-item>
</el-menu>

@select="handleSelect"给菜单添加点击事件
事件的定义：

handleSelect(key, keyPath) {
　　//key是index属性值，index可以直接设置路径。
  this.$router.push({path:key})
},
这样就完成了，点击菜单跳转后自动保存当前菜单的状态。

问题2：只保持一个菜单展开
unique-opened 是否只保持一个子菜单的展开