Vue3.0实现无限级菜单

function dataToTree(data) {
  const parents = data.filter((item) => item.pId === 0);
  const children = data.filter((item) => item.pId !== 0);
  toTree(parents, children);
  return parents;
  function toTree(parents, children) {
    for (var i = 0; i < parents.length; ++i) {
      for (var j = 0; j < children.length; ++j) {
        if (children[j].pId === parents[i].Id) {
          let _children = deepClone(children, []);
          toTree([children[j]], _children);
          if (parents[i].children) {
            parents[i].children.push(children[j]);
          } else {
            parents[i].children = [children[j]];
          }
        }
      }
    }
  }
}

function deepClone(source, target) {
  var _tar = target || {};
  let keys = Reflect.ownKeys(source);
  keys.map((key) => {
    if (typeof source[key] === "object") {
      _tar[key] =
        Object.prototype.toString.call(source[key]) === "[object Array]"
          ? []
          : {};
      deepClone(source[key], _tar[key]);
    } else {
      _tar[key] = source[key];
    }
  });
  return _tar;
}

function SortTree(tree) {
  tree = tree.sort((a, b) => a.order - b.order);
  tree.map((t) => {
    if (t.children) {
      t.children = SortTree(t.children);
    }
  });

  return tree;

function TreeToRoutes(treeData, routes) {
  routes = routes || [];
  for (var i = 0; i < treeData.length; ++i) {
    routes[i] = {
      path: treeData[i].link,
      name: treeData[i].name,
      component: () => import(`@/views/${treeData[i].name}`),
    };
    if (treeData[i].children) {
      routes[i].children = TreeToRoutes(
        treeData[i].children,
        routes[i].children
      );
    }
  }
  return routes;
}

<template>
  <div>
      <ul v-if="data.children && data.children.length > 0">
          <li><router-link :to="data.link">{{data.title}}</router-link></li> 
          <menu-item :data="item" :key="index"  v-for="(item,index) in data.children">
      </ul>
      <ul v-else>
          <li><router-link :to="data.link">{{data.title}}</router-link></li> 
      </ul>
  </div>
</template>

<script>
export default {
    name: "MenuItem",
    props:{
        data: Object
    }
}
</script>

<template>
  <div>
     <menu-item :data="item" :key="index" v-for="(item,index) in data" />
  </div>
</template>

<script>
import MenuItem from './MenuItem'
export default {
    name: "Page",
    components:{
        MenuItem
    }
}
</script>

export default [
  {
    Id: 15,
    pId: 0,
    name: "all",
    title: "all",
    link: "/all",
    order: 2,
  },
  {
    Id: 1,
    pId: 15,
    name: "clubs",
    title: "Club Management",
    link: "/clubs",
    order: 2,
  },
  {
    Id: 2,
    pId: 15,
    name: "leagues",
    title: "League Management",
    link: "/leagues",
    order: 1,
  },
  {
    Id: 3,
    pId: 15,
    name: "players",
    title: "Player Management",
    link: "/players",
    order: 3,
  },
  {
    Id: 5,
    pId: 2,
    name: "LeagueDelete",
    title: "Delete League",
    link: "/leagues/delete",
    order: 3,
  },
  {
    Id: 6,
    pId: 2,
    name: "LeagueUpdate",
    title: "Update League",
    link: "/leagues/update",
    order: 2,
  },
  {
    Id: 7,
    pId: 2,
    name: "LeagueAdd",
    title: "Add League",
    link: "/leagues/add",
    order: 1,
  },
  {
    Id: 8,
    pId: 3,
    name: "PlayerAdd",
    title: "Add Player",
    link: "/players",
    order: 1,
  },
  {
    Id: 9,
    pId: 3,
    name: "PlayerUpdate",
    title: "Update Player",
    link: "/players",
    order: 3,
  },
  {
    Id: 10,
    pId: 3,
    name: "PlayerDelete",
    title: "Delete Player",
    link: "/players",
    order: 2,
  },
  {
    Id: 11,
    pId: 1,
    name: "ClubAdd",
    title: "Add Club",
    link: "/clubs/add",
    order: 3,
  },
  {
    Id: 12,
    pId: 1,
    name: "ClubUpdate",
    title: "Update Club",
    link: "/clubs/update",
    order: 1,
  },
  {
    Id: 13,
    pId: 1,
    name: "ClubDelete",
    title: "Delete Club",
    link: "/clubs/delete",
    order: 2,
  },
];