BusinessBenchmark/src/components/menuTreeconfig.vue

<template>
    <div>
    <template v-for="menu in this.menuData">
      <el-sub-menu :key="menu.index" :index="menu.index" v-if="menu.children" :disabled="menu.index === '' ? true : false">
          <template #title>
              <!-- <i :class="menu.icon"></i> -->
              <img :src="menu.img" v-if="menu.index === '1'">
              <img :src="menu.img" v-else-if="menu.index === '2'">
              <img :src="menu.img" v-else-if="menu.index === '3'">
              <img :src="menu.img" v-else-if="menu.index === '4'">
              <img :src="menu.img" v-else-if="menu.index === '5'">
              <img :src="menu.img" v-else-if="menu.index === '6'">
              <span style="margin-left: 10px">{{menu.name}}</span>
              
              <!-- <span slot="title">{{menu.name}}</span> -->
          </template>
          <menu-tree :menuData="menu.children"></menu-tree>
      </el-sub-menu>
      <el-menu-item :key="menu.index" :index="menu.index" :route="menu.index" v-else>
          <!-- <i :class="menu.icon"></i> -->
          <img :src="menu.img" alt="">
          <template #title>
            <span style="margin-left: 10px">{{menu.name}}</span>
          </template>
          <!-- <span slot="title">{{menu.name}}</span> -->
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
    props: ['menuData'],
    name: 'MenuTree'
}
</script>

<style>

</style>