dataControl/src/components/Sidebar.vue

<template>
  <el-aside class="aside">
    <div class="head">
      <div>
        <img src="../assets/logo.png" alt="logo" />
        <span>数据控制</span>
      </div>
    </div>
    <div class="line" />
    <el-menu
      :default-openeds="state.defaultOpen"
      background-color="#222832"
      text-color="#fff"
      :router="true"
      :default-active="currentPath"
    >
      <div v-for="(list, i) of state.menuList" :key="i">
        <el-sub-menu :index="list.index" v-if="list.children.length > 0">
          <template #title>
            <el-icon>
              <component :is="list.iconName"></component></el-icon>
            <span>{{ list.name }}</span>
          </template>
          <el-menu-item
            :index="item.index"
            v-for="(item, index) of list.children"
            :key="index"
            >{{ item.name }}</el-menu-item
          >
        </el-sub-menu>
        <el-menu-item v-else :index="list.index"
          ><el-icon>
            <component :is="list.iconName"></component></el-icon>{{ list.name }}</el-menu-item
        >
      </div>
    </el-menu>
  </el-aside>
</template>
<script>
import { onMounted, reactive } from "vue";
import { useStore } from "vuex";
export default {
  name: "Sidebar",
  props: {
    currentPath: String,
  },
  setup() {
    const store = useStore();
    const state = reactive({
      defaultOpen: ["1"],
      menuList: [
        {
          id: 1,
          name: "设备信息",
          index: "/home",
          iconName: 'FolderRemove',
          children: [],
        },
        {
          id: 2,
          name: "网络配置",
          index: "/net",
          iconName: 'Management',
          children: [],
        },
        {
          id: 2,
          name: "规则引擎",
          index: "/rules",
          iconName: 'Management',
          children: [],
        },
        // {
        //   id: 4,
        //   name: "透传管理",
        //   index: "/transparent",
        //   iconName: 'Management',
        //   children: [],
        // },
        {
          id: 3,
          name: "数据管理",
          index: "/model",
          iconName: 'TrendCharts',
          children: [
            {
              id: 3 - 1,
              name: "模板管理",
              index: "/model",
            },
            {
              id: 3 - 2,
              name: "驱动管理",
              index: "/page",
            },
            // {
            //   id: 3 - 2,
            //   name: "实时数据",
            //   index: "/data",
            // },
            {
              id: 3 - 3,
              name: "上报管理",
              index: "/report",
            },
          ],
        },
      ],
    });
    return {
      state,
    };
  },
};
</script>
<style lang="scss" scoped>
.aside {
  width: 200px !important;
  background-color: #222832;
  overflow: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.aside::-webkit-scrollbar {
  display: none;
}

.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  div {
    display: flex;
    align-items: center;
  }
  img {
    width: 40px;
    margin-right: 10px;
  }
  span {
    font-size: 20px;
    color: #ffffff;
  }
}
.line {
  border-top: 1px solid hsla(0, 0%, 100%, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
</style>