elment-ui 导航菜单样式的修改（三）——二级菜单系列-三行

elment-ui 导航菜单样式的修改（三）——三级菜单系列-三行

三级菜单系列-三行

页面及接口数据写法

 <div class="top-b"></div>
    <div class="left">
      <el-menu
        :default-openeds="dactive"
        class="el-menu-vertical-demo"
        :unique-opened="true"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-submenu
          :index="item"
          v-for="(item,index) in Object.keys(directory)"
          :key="index"
          @click.native="handleClickIndex(item, $event)"
        >
          <template slot="title">
            <span>{{item}} {{mapping_count[item]}}</span>
          </template>

          <!--
          <el-menu-item :index="item" :key="index" >
            <span>•全部-{{mapping_count[item]}}</span>
          </el-menu-item>
          -->

          <template v-if="directory[item]">
            <el-menu-item-group
              :index="item+'_'+item_2"
              v-for="(item_2,index_2) in Object.keys(directory[item])"
              :key="item+item_2+index_2"
              @click.native="handleClickIndex(item+'_'+item_2, $event)"
            >
              <template slot="title">
                <div class="spk">
                  <span class="spk-a"></span>
                  <span class="spk-b">{{item_2}} {{mapping_count[item+'_'+item_2]}}</span>
                </div>
              </template>
              <template v-if="directory[item][item_2]">
                <el-menu-item
                  :index="item+'_'+item_2+'_'+item_3"
                  :key="item+item_2+index_2+item_3+index_3"
                  @click.native="handleClickIndex(item+'_'+item_2+'_'+item_3, $event)"
                  v-for="(item_3,index_3) in directory[item][item_2]"
                >
                  <span>{{item_3}} {{mapping_count[item+'_'+item_2+'_'+item_3]}}</span>
                </el-menu-item>
              </template>
            </el-menu-item-group>
            <!--
            <el-submenu
              :index="item+'_'+item_2"
              popper-class="tit-null"
              v-for="(item_2,index_2) in Object.keys(directory[item])"
              :key="item+item_2+index_2"
            >
              <template slot="title">
                <span>{{item_2}}-{{mapping_count[item+'_'+item_2]}}</span>
              </template>

              <el-menu-item
                :index="item+'_'+item_2"
                :key="item+item_2+index_2"
                @click.native="handleClickIndex(item+'_'+item_2)"
              >
                <span>•全部-{{mapping_count[item+'_'+item_2]}}</span>
              </el-menu-item>

              <template v-if="directory[item][item_2]">
                <el-menu-item
                  :index="item+'_'+item_2+'_'+item_3"
                  :key="item+item_2+index_2+item_3+index_3"
                  @click.native="handleClickIndex(item+'_'+item_2+'_'+item_3)"
                  v-for="(item_3,index_3) in directory[item][item_2]"
                >
                  <span>•{{item_3}}-{{mapping_count[item+'_'+item_2+'_'+item_3]}}</span>
                </el-menu-item>
              </template>
            </el-submenu>
            -->
          </template>
        </el-submenu>
      </el-menu>
    </div>

样式

.top-b {
  height: 20px;
  background: #f7f8fa;
}
.left {
  width: 280px;
  // height: 580px;
  background: #ffffff;
  padding-top: 22px;
  padding-bottom: 22px;
  float: left;
  // 左侧导航栏箭头调试
  /deep/.el-submenu__icon-arrow {
    position: absolute;
    top: 56%;
    left: 32px;
    margin-top: -11px;
    transition: transform 0.3s;
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: block;
    // margin-right: 5px;
  }
  .spk {
    padding-left: 20px;
    height: 46px;
    line-height: 46px;
    padding-top: 0px;
    padding-bottom: 0px;
    .spk-a {
      display: inline-block;
      width: 4px;
      height: 4px;
      // border: 1px solid #aaaaaa;
      border-radius: 2px;
      background-color: #aaaaaa;
      opacity: 0.5; //透明度
      margin-right: 10px;
      vertical-align: middle;
    }
    .spk-b {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      // color: rgba(24, 144, 255, 1);
      color: #555555;
      line-height: 18px;
    }
  }
  /deep/.el-submenu__title {
    padding-left: 60px !important;
    font-size: 20px;
    height: 46px;
    line-height: 46px;
    font-weight: 700;
  }
  .el-submenu {
    border: none;
    /deep/ .el-submenu {
      padding-left: 60px !important;
      color: #333333;

      .el-submenu__title {
        font-size: 18px;
        color: #333333;
        .el-icon-arrow-down:before {
          content: '\e6df';
          color: #333333;
        }
        .el-menu-item {
          padding-left: 60px !important;
          font-size: 16px;
        }
        // 左侧导航栏箭头调试
        /deep/.el-submenu__icon-arrow {
          position: absolute;
          top: 56%;
          left: 32px;
          margin-top: -7px;
          transition: transform 0.3s;
          font-size: 18px;
          width: 18px;
          height: 18px;
          display: block;
          // margin-right: 5px;
        }
      }
      .el-menu-item {
        padding-left: 60px !important;
        font-size: 16px;
      }
    }
  }
  /deep/.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
    transform-origin: center;
  }
  // /deep/.el-icon-arrow-down:before {
  //   font-size: 18px;
  // }
  // 修改无下拉列表的导航菜单样式
  .el-menu-item {
    font-size: 20px;
    // font-weight: bold;
  }
  /deep/.el-menu-item-group__title {
    padding-left: 60px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .el-menu-item,
  .el-submenu__title {
    height: 46px;
    line-height: 46px;
    padding-left: 77px !important;
    font-size: 14px;
    color: #aaaaaa;
  }
  .left .el-menu-item[data-v-404f6b4c],
  .left .el-submenu__title[data-v-404f6b4c] {
    height: 46px;
    line-height: 46px;
  }
}

图例