remuneration/src/views/humanResources/panorama/panoramaDetailsMenu.vue

<template>
  <el-submenu
    v-if="item.children && item.children.length"
    :index="item.id.toString()"
    :popper-append-to-body="false"
  >
    <template #title>
      <span>{{ item.label }}</span>
    </template>
    <!-- 递归渲染子菜单 -->
    <panorama-details-menu
      v-for="child in item.children"
      :key="child.id"
      :item="child"
    />
  </el-submenu>

  <!-- 无子菜单：渲染 el-menu-item -->
  <el-menu-item
    v-else
    :index="item.component"
  >
  <span>{{ item.label }}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: 'panoramaDetailsMenu',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-menu-item {
  height: 40px;
  display: flex;
  align-content: center;
  &.is-active {
    background-color: rgb(236, 245, 255)
  }
  &:hover {
    background-color: #f5f7fa;
  }
}
</style>