iview里面的menu组件如何实现三级菜单和二级菜单？

Question

之前用iView的时候只是将菜单组件Menu封装了二级菜单，现在需要再添加三级菜单，因为后面数据里面有的是二级菜单的，有的是三级菜单的，这个代码该如何更改呢？
代码：

<div>
    <Menu
      :open-names="[openItem]"
      accordion
      :active-name="activeItem"
      ref="cusMenu"
    >
      <template v-for="(menu, index) in menuData">
        <MenuItem
          :key="menu.id"
          :name="'' + index"
          v-if="!menu.children"
          @click.native="openPage(menu, menu.path, index)"
        >
          <Icon :type="menu.icon" />
          {{ menu.name }}
        </MenuItem>

        <Submenu v-else :key="menu.id" :name="'' + index">
          <template slot="title">
            <Icon :type="menu.icon" />
            {{ menu.name }}
          </template>
          <MenuItem
            :name="index + '-' + subIndex"
            v-for="(item, subIndex) in menu.children"
            :key="item.id"
            @click.native="openPage(item, menu.path, index, subIndex)"
            >{{ item.name }}</MenuItem
          >
        </Submenu>
      </template>
    </Menu>
  </div>

<script>
export default {
  name: "Menu4",
  data() {
    return {
      activeItem: null,
      openItem: [],
      menuData: [],
      // menuData1: [
      //   {
      //     name: "基础设置",
      //     icon: "ios-paper",
      //     url: "baseSeting.html",
      //     router: "/",
      //     children: [
      //       {
      //         name: "用户设置",
      //         icon: "",
      //         url: "baseSeting.html",
      //         router: "#/",
      //       },
      //       {
      //         name: "菜单设置",
      //         icon: "",
      //         url: "baseSeting.html",
      //         router: "#/menuSet",
      //       },
      //     ],
      //   },
      //   {
      //     name: "接口管理",
      //     icon: "ios-stats",
      //     url: "interfaceMengement.html",
      //     router: "/",
      //     children: [
      //       {
      //         name: "接口设置",
      //         icon: "",
      //         url: "interfaceMengement.html",
      //         router: "#/",
      //       },
      //       {
      //         name: "接口文档",
      //         icon: "",
      //         url: "http://10.81.1.77:8888/doc.html",
      //         router: "#/",
      //       },
      //     ],
      //   },

      //   {
      //     name: "数据中心",
      //     icon: "ios-people",
      //     url: "dataCenter.html",
      //     router: "/",
      //     children: [
      //       {
      //         name: "业务数据",
      //         icon: "",
      //         url: "dataCenter.html",
      //         router: "#/",
      //       },
      //       {
      //         name: "大屏数据",
      //         icon: "",
      //         url: "dataCenter.html",
      //         router: "#/bigScreenData",
      //       },
      //       {
      //         name: "接口统计",
      //         icon: "",
      //         url: "dataCenter.html",
      //         router: "#/interfaceStatistics",
      //       },
      //     ],
      //   },
      // ],
    };
  },
  methods: {
    openPage(item, page, index1, index2) {
      this.getMenuList();
      console.log(
        item,
        page,
        index1,
        index2,
        "openPage(item, page, index1, index2)"
      );
      // console.log(item.url, item.router);
      // console.log(`${process.env.VUE_APP_PAGE}`, 'process.env.VUE_APP_PAGE');
      if (!item.path) {
        this.$Message.destroy();
        this.$Message.info("待开发");
        return;
      }
      if (item.path.indexOf("http") != -1) {
        window.open(`${item.path}${item.router}?item=${index1}`);
      } else {
        if (index2 === undefined) {
          window.location.href = `${item.path}${item.router}?item=${index1}`;
        } else {
          window.location.href = `${item.path}${item.router}?item=${index1}-${index2}`;
        }
      }
    },

    handleUrl(item) {
      console.log(item, "handleUrl");
      if (item.indexOf("-") !== -1) {
        return item.split("-")[0];
      }
      return item;
    },
    // 解析url中的参数值
    getQueryVariable(str) {
      console.log(str, "str");
      const query = window.location.hash.split("?")[1];
      console.log(query, "query");
      if (query) {
        const vars = query.split("&");
        for (let i = 0; i < vars.length; i += 1) {
          const pair = vars[i].split("=");
          if (pair[0] === str) {
            return pair[1];
          }
        }
      }
      return "0";
    },
    // 获取菜单组数据
    async getMenuList() {
      const url = "/api/menu/userTree";
      await this.$Ajax.get(url).then((e) => {
        if (e.success) {
          console.log(e.result, "e.result");
          this.menuData = e.result;
          if (this.menuData.length > 0) {
            this.$set(this.$store.state, "MENULIST", true);
          } else {
            this.$set(this.$store.state, "MENULIST", false);
          }
          this.$nextTick(() => {
            this.$refs.cusMenu.updateActiveName();
            this.$refs.cusMenu.updateOpened();
          });
        } else {
          this.$Message.info(e.message);
        }
      });
    },
  },
  mounted() {
    this.getMenuList();
    this.activeItem = this.getQueryVariable("item");
    this.openItem = this.handleUrl(this.getQueryVariable("item"));
  },
};
</script>