实现思路主要组件嵌套(组件自己调用自己)
下面是组件所需要的数据
{ "code": 1, "data": { "menuVoList": [ { "childList": [ { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587610158, "id": "2f006aed6a114579bd8b9809724428f7", "name": "系统用户权限管理", "parentId": "6d68079a16b94292990f612237bd048e", "path": "/userallotrole", "updateBy": "0-1", "updateTime": 1587610221 } }, { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587605059, "id": "c948265cdf27420eb7b6b502292c5990", "name": "系统用户管理", "parentId": "6d68079a16b94292990f612237bd048e", "path": "/user", "updateBy": "0-1", "updateTime": 1587610230 } } ], "menu": { "createBy": "0-1", "createTime": 1587605025, "id": "6d68079a16b94292990f612237bd048e", "name": "用户管理", "parentId": "", "path": "/#", "updateBy": "0-1", "updateTime": 1587610117 } }, { "childList": [ { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587469457, "id": "d4b70897052742bb860cf14cea8cf131", "name": "新建/修改菜单", "parentId": "82e5ca1ab2e04d8faffeb973286771ec", "path": "/newMenu", "updateBy": "0-1", "updateTime": 1587469457 } } ], "menu": { "createBy": "0-1", "createTime": 1587469385, "id": "82e5ca1ab2e04d8faffeb973286771ec", "name": "菜单管理", "parentId": "", "path": "", "updateBy": "0-1", "updateTime": 1587469426 } }, { "childList": [ { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587468494, "id": "3a092edd120d40b79322d8486e53e5a1", "name": "系统角色管理", "parentId": "ce5704f647d341fe8334ad12c6dd4a6b", "path": "/setrole", "updateBy": "0-1", "updateTime": 1587469340 } }, { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587469360, "id": "61d0e4fecbed407d89b1ea5878072374", "name": "设置角色权限", "parentId": "ce5704f647d341fe8334ad12c6dd4a6b", "path": "/authorization", "updateBy": "0-1", "updateTime": 1587469360 } }, { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587469520, "id": "a1a2f6bcbfba4a7f9178ef03ea0fe5b0", "name": "权限管理", "parentId": "ce5704f647d341fe8334ad12c6dd4a6b", "path": "/resource", "updateBy": "0-1", "updateTime": 1587624251 } } ], "menu": { "createBy": "0-1", "createTime": 1587468417, "id": "ce5704f647d341fe8334ad12c6dd4a6b", "name": "角色管理", "parentId": "", "path": "", "updateBy": "0-1", "updateTime": 1587468417 } } ] }, "message": "成功" }
现在我们来设置组件 (在 componet 文件夹里面建一个 menu.vue) 代码如下
//判断传进来的数据中 childList 数组length 是否大于零, 如果大于零表示 不是不需要在循环下去了 {{ value.menu.name }} {{ value.menu.name }}
接下来 在需要使用 menu 组件的地方引入刚才定义的组件
import menuTree from '@/component/menu' export default{ components: { menuTree }, data: { list: [] }, methods: { getMenuList({}).then(res => { //我这里是请求后台得来得数据,没有数据直接用我上面得数据,不过得像我下面这样处理 if (res.status === 200) { this.list = res.data.data.menuVoList } }) } }
这样,em-menu 组件的无限极循环便实现了,注意,我 上面代码中 el-menu 的属性可能多了一些,请根据自己需要删除