侧导航组件递归

<template>
  <div>
    <template v-for="(node, index) in nodes">
      <el-submenu
        :index="index + node.id"
        v-if="node.ptype=='MENU' "
        :key="node.id"
        :id="node.id"
      >
        <template slot="title">
          <i :class="node.iconCls"></i>
          <span slot="title">{{node.id}}=={{ node.name }}</span>
        </template>
        <menu-tree 
          :nodes="node.subNode"
          v-if="node.ptype == 'MENU' || node.ptype == 'PAGE'"
        ></menu-tree>
      </el-submenu>
      <el-menu-item
        :index="index"
        :key="node.id"
        :route="{ name: node.name }"
        :id="node.id"
        v-if="!node.subNode || node.ptype=='PAGE'"
        @click="handleSelect(node.apiUrl)"
      >
        <i :class="node.iconCls"></i>
        <span slot="title">{{ node.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>
 
<script>
export default {
  name: "MenuTree",
  data() {
    return {};
  },
  props: {
    nodes: [String, Array, Object],
  },

  methods: {
   
    handleSelect(path) {
      this.$router.push({
        path: path,
      });
    },
  },
};
</script>
 
<style scoped>
</style>

menu-tree 是上述组件