管理系统中很多这样树形菜单显示的，这里要用到组件的递归来完成，这里我们来学习下vue关于组件递归的实现。
实现原理
递归的原理无非就是自己调用自己，来实现无限循环，但是递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。否则会无限死循环，程序报错。
代码实现
子组件
父组件
数据类型
menuList: [
{
id: "2",
resourceName: "微信公众号",
resourceDes: "",
resourceIco: "el-icon-success",
resourceType: "2",
parentId: "",
appId: "2",
resourceUrl: "",
resourceAttr: ""
},
{
id: "3",
resourceName: "一级",
resourceDes: "",
resourceIco: "el-icon-warning",
resourceType: "2",
parentId: "",
appId: "4aab7a01a8304b7f8f1906073169a30f",
resourceUrl: "",
resourceAttr: "",
children: [
{
id: "4",
resourceName: "二级",
resourceDes: "",
resourceIco: "el-icon-circle-plus",
resourceType: "2",
parentId: "3",
appId: "4aab7a01a8304b7f8f1906073169a30f",
resourceUrl: "/app/unitList",
resourceAttr: "",
children: [
{
id: "4-1",
resourceName: "三级",
resourceDes: "",
resourceIco: "el-icon-circle-close",
resourceType: "2",
parentId: "4",
appId: "4aab7a01a8304b7f8f1906073169a30f",
resourceUrl: "/app/unitList",
resourceAttr: "",
children: [
{
id: "4-1-1",
resourceName: "四级",
resourceDes: "",
resourceIco: "el-icon-date",
resourceType: "2",
parentId: "4-1",
appId: "4aab7a01a8304b7f8f1906073169a30f",
resourceUrl: "/text",
resourceAttr: ""
}
]
}
]
},
{
id: "5",
resourceName: "部门管理",
resourceDes: "",
resourceIco: "el-icon-document",
resourceType: "2",
parentId: "3",
appId: "4aab7a01a8304b7f8f1906073169a30f",
resourceUrl: "/app/deptList",
resourceAttr: ""
},
{
id: "3-5",
resourceName: "用户管理",
resourceDes: "",
resourceIco: "el-icon-edit",
resourceType: "2",
parentId: "3",
appId: "4aab7a01a8304b7f8f1906073169a30f",
resourceUrl: "/app/usersList",
resourceAttr: ""
},
{
id: "3-6",
resourceName: "授权",
resourceDes: "",
resourceIco: "el-icon-location-outline",
resourceType: "2",
parentId: "3",
appId: "4aab7a01a8304b7f8f1906073169a30f",
resourceUrl: "",
resourceAttr: ""
}
]
},
{
id: "6",
resourceName: "应用管理",
resourceDes: "",
resourceIco: "el-icon-menu",
resourceType: "2",
parentId: "",
appId: "4aab7a01a8304b7f8f1906073169a30f",
resourceUrl: "/app/appManage",
resourceAttr: ""
},
{
id: "8",
resourceName: "应用管理New",
resourceDes: "",
resourceIco: "el-icon-bell",
resourceType: "2",
parentId: "",
appId: "4aab7a01a8304b7f8f1906073169a30f",
resourceUrl: "/app/AppManagelication",
resourceAttr: ""
}
]
网友评论