middleware/ai-fueling/src/main/web/src/components/common/Sidebar.vue

<template>
  <el-menu default-active="/station/machine" :router="true" v-loading="isLoading"
           background-color="#ffffff" text-color="#333" active-text-color="#005eb0" class="o-x-h"
           :select="onSelect">
    <sidebar-item v-for="item of menuItems" :key="item.title" :menu="item"/>
  </el-menu>
</template>

<script>
import SidebarItem from './SidebarItem'

    export default {
        name: 'Sidebar',
        data() {
            return {
                isLoading: false,
                menuTree: [],
                menuItems: [
                  {
                    title: "油机配置",
                    icon: "station",
                    menuItems:[],
                    action:"/station/machine"
                  }
                  // {
                  //   title: "后台配置",
                  //   icon: "backstage",
                  //   menuItems:[],
                  //   action:"/station/data"
                  // }
                ]
            }
        },
        methods: {
          onSelect(index,indexPath) {
            console.log(`由${index}跳转到${indexPath}`)
          }
        },
        components: {SidebarItem}
    }
</script>

<style lang="scss">
  .sidebar {
    & > ul {
      height: 100%;
    }

    .mock-icon {
      font-size: 0;

      img {
        margin-right: 8px;
      }
    }
  }

</style>