11-mes-new/src/views/UserPage/TestMenuItem.vue

<template>
  <el-submenu v-if="menuItem.children" :index="constructIndex(menuItem)">
    <!-- 标题 -->
    <template slot="title">
      <!-- <i class="el-icon-menu"></i> -->
      <i style="line-height: 1;">
        <svg
          width="16px"
          height="16px"
          viewBox="0 0 16 16"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <title>菜单</title>
          <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
              <g id="编组-7" transform="translate(376.000000, 200.000000)">
                <g id="菜单" transform="translate(0.000000, 2.000000)">
                  <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
                  <path
                    d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
                    id="形状"
                    fill="currentColor"
                  ></path>
                </g>
              </g>
            </g>
          </g>
        </svg>
      </i>
      <span>{{ menuItem.name }}</span>
    </template>

    <!-- 主体 -->
    <template v-for="(submenuItem, idx) in menuItem.children">
      <TestMenuItem :menuItem="submenuItem" :level="level + 1" />
    </template>
  </el-submenu>

  <!-- 一级菜单 -->
  <el-menu-item v-else :index="constructIndex(menuItem)">
    <!-- <i v-if="level !== 1" class="el-icon-aim"></i>
      <i v-else class="el-icon-menu"></i> -->
    <i style="line-height: 1px" v-if="level !== 1">
      <svg
        width="8px"
        height="8px"
        viewBox="0 0 8 8"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <title>椭圆形</title>
        <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g
            id="质量追溯_设备参数追溯"
            transform="translate(-396.000000, -246.000000)"
            fill="currentColor"
            fill-rule="nonzero"
          >
            <g id="编组-3" transform="translate(396.000000, 240.000000)">
              <path
                d="M4,6 C6.209139,6 8,7.790861 8,10 C8,12.209139 6.209139,14 4,14 C1.790861,14 0,12.209139 0,10 C0,7.790861 1.790861,6 4,6 Z M4,7 C2.34314575,7 1,8.34314575 1,10 C1,11.6568542 2.34314575,13 4,13 C5.65685425,13 7,11.6568542 7,10 C7,8.34314575 5.65685425,7 4,7 Z"
                id="椭圆形"
              ></path>
            </g>
          </g>
        </g>
      </svg>
    </i>
    <i style="line-height: 1;" v-else>
      <svg
        width="16px"
        height="16px"
        viewBox="0 0 16 16"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <title>菜单</title>
        <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
            <g id="编组-7" transform="translate(376.000000, 200.000000)">
              <g id="菜单" transform="translate(0.000000, 2.000000)">
                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
                <path
                  d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
                  id="形状"
                  fill="currentColor"
                ></path>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </i>
    <span slot="title">{{ menuItem.name }}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: 'TestMenuItem',
  props: {
    level: {
      type: Number,
      default: 1
    },
    index: {
      type: String,
      default: ''
    },
    menuItem: {
      default: () => ({})
    },
    defaultActive: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {
    constructIndex(menuItem) {
      return menuItem.id + '$--$' + menuItem.name
    }
  }
}
</script>

<style scoped></style>