vue3 typescript 菜单管理新增选择树形结构

json数据
{
    "code": "00000",
    "data": [
        {
            "value": 1,
            "label": "系统管理",
            "children": [
                {
                    "value": 2,
                    "label": "用户管理",
                    "children": [
                        {
                            "value": 31,
                            "label": "用户新增"
                        },
                        {
                            "value": 32,
                            "label": "用户编辑"
                        },
                        {
                            "value": 33,
                            "label": "用户删除"
                        },
                        {
                            "value": 88,
                            "label": "重置密码"
                        }
                    ]
                },
                {
                    "value": 3,
                    "label": "角色管理",
                    "children": [
                        {
                            "value": 70,
                            "label": "角色新增"
                        },
                        {
                            "value": 71,
                            "label": "角色编辑"
                        },
                        {
                            "value": 72,
                            "label": "角色删除"
                        }
                    ]
                },
                {
                    "value": 4,
                    "label": "菜单管理",
                    "children": [
                        {
                            "value": 73,
                            "label": "菜单新增"
                        },
                        {
                            "value": 75,
                            "label": "菜单删除"
                        },
                        {
                            "value": 74,
                            "label": "菜单编辑"
                        }
                    ]
                },
                {
                    "value": 5,
                    "label": "部门管理",
                    "children": [
                        {
                            "value": 76,
                            "label": "部门新增"
                        },
                        {
                            "value": 77,
                            "label": "部门编辑"
                        },
                        {
                            "value": 78,
                            "label": "部门删除"
                        }
                    ]
                },
                {
                    "value": 6,
                    "label": "字典管理",
                    "children": [
                        {
                            "value": 79,
                            "label": "字典类型新增"
                        },
                        {
                            "value": 81,
                            "label": "字典类型编辑"
                        },
                        {
                            "value": 84,
                            "label": "字典类型删除"
                        },
                        {
                            "value": 85,
                            "label": "字典数据新增"
                        },
                        {
                            "value": 86,
                            "label": "字典数据编辑"
                        },
                        {
                            "value": 87,
                            "label": "字典数据删除"
                        }
                    ]
                }
            ]
        },
        {
            "value": 40,
            "label": "接口文档",
            "children": [
                {
                    "value": 41,
                    "label": "Apifox"
                },
                {
                    "value": 103,
                    "label": "Swagger"
                },
                {
                    "value": 104,
                    "label": "Knife4j"
                }
            ]
        },
        {
            "value": 26,
            "label": "平台文档",
            "children": [
                {
                    "value": 102,
                    "label": "平台文档(内嵌)"
                },
                {
                    "value": 30,
                    "label": "平台文档(外链)"
                }
            ]
        },
        {
            "value": 20,
            "label": "多级菜单",
            "children": [
                {
                    "value": 21,
                    "label": "菜单一级",
                    "children": [
                        {
                            "value": 22,
                            "label": "菜单二级",
                            "children": [
                                {
                                    "value": 23,
                                    "label": "菜单三级-1"
                                },
                                {
                                    "value": 24,
                                    "label": "菜单三级-2"
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "value": 36,
            "label": "组件封装",
            "children": [
                {
                    "value": 37,
                    "label": "富文本编辑器"
                },
                {
                    "value": 38,
                    "label": "图片上传"
                },
                {
                    "value": 39,
                    "label": "图标选择器"
                },
                {
                    "value": 95,
                    "label": "字典组件"
                },
                {
                    "value": 93,
                    "label": "签名"
                },
                {
                    "value": 94,
                    "label": "表格"
                }
            ]
        },
        {
            "value": 98,
            "label": "Table",
            "children": [
                {
                    "value": 99,
                    "label": "动态Table"
                },
                {
                    "value": 100,
                    "label": "拖拽Table"
                },
                {
                    "value": 101,
                    "label": "综合Table"
                }
            ]
        },
        {
            "value": 89,
            "label": "功能演示",
            "children": [
                {
                    "value": 96,
                    "label": "Permission"
                },
                {
                    "value": 97,
                    "label": "Icons"
                },
                {
                    "value": 90,
                    "label": "Websocket"
                },
                {
                    "value": 91,
                    "label": "敬请期待..."
                }
            ]
        }
    ],
    "msg": "一切ok"
}

数组定义
type.ts
/**
 * 菜单视图对象类型
 */
export interface MenuVO {
  /**
   * 子菜单
   */
  children?: MenuVO[];
  /**
   * 组件路径
   */
  component?: string;
  /**
   * ICON
   */
  icon?: string;
  /**
   * 菜单ID
   */
  id?: number;
  /**
   * 菜单名称
   */
  name?: string;
  /**
   * 父菜单ID
   */
  parentId?: number;
  /**
   * 按钮权限标识
   */
  perm?: string;
  /**
   * 跳转路径
   */
  redirect?: string;
  /**
   * 路由名称
   */
  routeName?: string;
  /**
   * 路由相对路径
   */
  routePath?: string;
  /**
   * 菜单排序(数字越小排名越靠前)
   */
  sort?: number;
  /**
   * 菜单类型
   */
  type?: MenuTypeEnum;
  /**
   * 菜单是否可见(1:显示;0:隐藏)
   */
  visible?: number;
}
引入使用
import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/types";
const menuList = ref<MenuVO[]>([]);


按钮
 <el-button
              v-if="scope.row.type == 'CATALOG' || scope.row.type == 'MENU'"
              v-hasPerm="['sys:menu:add']"
              type="primary"
              link
              size="small"
              @click.stop="openDialog(scope.row.id)"
            >
              <i-ep-plus />新增
            </el-button>

            <el-button
              v-hasPerm="['sys:menu:edit']"
              type="primary"
              link
              size="small"
              @click.stop="openDialog(undefined, scope.row.id)"
            >
              <i-ep-edit />编辑
            </el-button>


新增（下拉框树形选择）
/**
 * 打开表单弹窗
 *
 * @param parentId 父菜单ID
 * @param menuId 菜单ID
 */
function openDialog(parentId?: number, menuId?: number) {
  getMenuOptions()
    .then(({ data }) => {
      menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }];
    })
    .then(() => {
      dialog.visible = true;
      if (menuId) {
        dialog.title = "编辑菜单";
        getMenuForm(menuId).then(({ data }) => {
          Object.assign(formData, data);
          menuCacheData.type = data.type;
          menuCacheData.path = data.path ?? "";
        });
      } else {
        dialog.title = "新增菜单";
        formData.parentId = parentId;
      }
    });
}

下拉框
  <el-form-item label="父级菜单" prop="parentId">
          <el-tree-select
            v-model="formData.parentId"
            placeholder="选择上级菜单"
            :data="menuOptions"
            filterable
            check-strictly
            :render-after-expand="false"
          />
        </el-form-item>