vue开发 导航菜单样式自定义，因为element ui NavMenu的功能已经满足需要，只需要调整样式就可以了。

使用代码

<sidebar :openeds="[0]" active="attendance"></sidebar>

使用实例

vue 后台案例

组件代码

/**
* @Author: 858834013@qq.com
* @Name: sidebar
* @Date: 2022-06-03
* @Desc:
*/
<template>
  <div class="sidebar">
    <div class="logo">
      <img src="../assets/logo.png" alt="">
    </div>
    <div class="sidebarList hideScrollBar">
      <div class="menus">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          :unique-opened="true"
          @select="handleSelect"
          :default-openeds="openeds"
          :default-active="active"
          @close="handleClose">
          <el-submenu :index="index" v-for="(item,index) in list" :key="index">
            <template slot="title">
              <div class="title">
                <div class="icon">
                  <i :class="item.icon"></i>
                </div>
                <span>{{ item.title }}</span>
              </div>
            </template>
            <el-menu-item-group>
              <div @click="goUrl(item2)" v-for="(item2,index2) in item.children" :key="index2">
                <el-menu-item :index="item2.index">{{ item2.title }}
                </el-menu-item>
              </div>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "sidebar",
  components: {},
  props: {
    openeds: {
      type: Array,
      default() {
        return [0];
      }
    },
    active: {
      type: String,
      default() {
        return ''
      }
    },
  },
  data() {
    return {
      isActive: false,
      list: [
        {
          title: '日常办公',
          icon: 'icon-bangong',
          url: '/',
          children: [
            {
              title: '考勤',
              icon: '',
              index: 'attendance',
              url: '/attendance'
            }, {
              title: '考勤明细',
              icon: '',
              index: 'attendanceDetail',
              url: '/attendanceDetail'
            }, {
              title: '统计分析',
              icon: '',
              index: 'statisticalAnalysis',
              url: '/statisticalAnalysis'
            },
            {
              title: '采购管理',
              icon: '',
              index: 'purchasingManagement',
              url: '/purchasingManagement'
            },
            // {
            //   title: '审批统计',
            //   icon: '',
            //   index: 'attendance',
            //   url: '/attendance'
            // },
          ],
          expand: false,
          num: 0
        }, {
          title: '客户',
          icon: 'icon-kehu',
          url: '/',
          children: [
            {
              title: '客户线索',
              icon: '',
              index: 'cluesToCustomer',
              url: '/cluesToCustomer'
            }
            // , {
            //   title: '客户拜访',
            //   icon: '',
            //   index: 'attendanceDetail',
            //   url: '/attendanceDetail'
            // }
            // , {
            //   title: '审批流程',
            //   icon: '',
            //   index: 'attendance',
            //   url: '/attendance'
            // }, {
            //   title: '销售区域',
            //   icon: '',
            //   index: '',
            //   url: '/'
            // }, {
            //   title: '客户分布地图',
            //   icon: '',
            //   index: 'attendance',
            //   url: '/attendance'
            // },
          ],
          expand: true,
          num: 0
        }, {
          title: '进销存',
          icon: 'icon-jinxiao',
          url: '/roleAudit/index',
          children: [],
          expand: false,
          num: 0
        }, {
          title: '系统管理',
          icon: 'icon-shezhi',
          url: '/statistic/index',
          children: [],
          expand: false,
          num: 0
        },
        {
          title: '基础信息',
          icon: 'icon-jichu',
          url: '',
          num: 0,
          expand: false,
          children: [{
            title: '客户管理',
            icon: '',
            index: 'customer',
            url: '/customer'
          }]
        },
        {
          title: '商城',
          icon: 'icon-shop',
          url: '/notice/index',
          children: [],
          expand: false,
          num: 3
        }
      ]
    }
  },
  watch: {
    $route(to, from) {
      this.getActive()
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goUrl(item) {
      this.$router.push({path: item.url});
    },
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  width: 236px;
  height: 100%;
  position: fixed;
  left: 0;
  background: #003963;
  box-shadow: 10px 0px 20px 0px rgba(134, 159, 178, 0.36);
  border-radius: 0px 20px 16px 0px;

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    padding-top: 32px;

    img {
      width: 96px;
    }
  }

  .sidebarList {
    padding-top: 46px;
  }

  .sidebarList {
    position: relative;
    height: calc(100% - 110px);
    overflow-y: scroll;

    a {
      text-decoration: none;
    }
  }
}

.title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .icon {
    width: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    font-size: 20px;
  }
}

.menus {
  width: 206px;
  margin: 0 auto;

  ::v-deep {
    .el-menu {
      border: none;
      background: none;
    }

    .el-submenu {
      margin-bottom: 20px;
    }

    .el-submenu__title {
      width: 206px;
      height: 50px;
      box-shadow: 0px 6px 16px 0px rgba(1, 44, 76, 0);
      border-radius: 16px;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #A5C0D4;
      padding-left: 0 !important;
      padding-right: 0 !important;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      i {
        color: #9db9ce;
      }
    }

    .el-submenu .el-menu-item {
      background: none;
      color: #A5C0D4;
      font-size: 16px;
      margin-left: 20px;
    }

    .el-submenu .el-menu-item.is-active {
      color: #FFFFFF;
      background: url("../assets/icon_rightk.png") 6px center no-repeat;
      background-size: 10px 8px;
    }

    .is-opened .el-submenu__title, .el-submenu__title:hover {
      background: #2a74aa;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #FFFFFF;

      i {
        color: #f4f8fa;
      }
    }
  }
}
</style>