Vue.js递归组件实现树形菜单（实例分享)

编辑：宝哥软件园来源：互联网时间：2021-09-06

新天龙八部

角色扮演 | 1.85G

评分

立即下载

最近看了Vue.js的递归组件，实现了一个最基本的树形菜单。

项目结构：

main.js作为入口，很简单：

从“呜呜呜。配置。调试=真正的导入主文件"导入Vue ./组件/主。Vue ' new Vue({ El : ' # app '，render: h=h(main)})它引入了一个组件main.vue:

template div class=' tree-menu ' ul v-for=' MenuItem in MoDEL ' my-tree : MoDEL=' MenuItem '/my-tree/ul/div/template script var my DATa=[{ ' id ' : ' 1 '，' menuName ' : '基础管理，' menuCode': '10 '，' children ' :[{ ' MenuMe ' : '用户管理，' menuCode': '11' }，{ ' menuName ' : '角色管理，' menuCode': '12 '，' children ' :[{ ' MenuMe ' : '管理员，' menuCode': '121' }，{ 'menuName': 'CEO '，' menuCode': '122' }，{ 'menuName': 'CFO '，' menuCode': 123' }，{ 'menuName': '首席运营官，' menuCode': '124' }，{ ' menuName ' : '普通人，' menuCode': '124' } ] }，{ ' menuName ' : '权限管理，' menuCode': '13' } ] }，{ 'id': '2 '，' menuName ' : '商品管理，menuCode': '' }，{ 'id': '3 '，' menuName ' : '订单管理，' menuCode': '30 '，' children ' :[{ ' MenuMe ' : '订单列表，' menuCode': '31' }，{ ' menuName ' : '退货列表，' menuCode': '32 '，' children ' :[]} }，{ 'id': '4 '，' menuName ' : '商家管理，' menuCode': ' '，' children ' :[]}]；从""导入我的树./公共/树形菜单。vue ' export default { components 3360 { myTree }，data(){ return { model : myData } }/script该文件引入了树形组件treeMenu.vue:

模板Li span @ click=' toggle ' I v-if=' IsFolder ' class=' icon ' : class='[open？文件夹-打开' : '文件夹]'/i i v-if='！is folder ' class=' icon file-text '/I { { model }。menuname } }/span ul v-show=' open ' v-if=' IsFolder '树-菜单v-for=' model中的项目。Childers ' : model=' item '/tree-menu/ul/Li/template脚本导出默认值{ name : ' tree menu '，prop s 3360[' model ']，data(){ return { open : false，isFolder: true } }，computationthis。open } } } }/script style ul { list-style : none；} I .图标{显示：内嵌块；宽度： 15px高度： 15px背景-重复：不重复；垂直对齐：中间；} .图标。文件夹{ background-image : URL(/src/assets/folder。巴布亚新几内亚)；} .图标。文件夹-打开{ background-image : URL(/src/assets/folder-open。巴布亚新几内亚)；} .图标。文件-文本{ background-image : URL(/src/assets/file-text。巴布亚新几内亚)；}.树形菜单李{行高： 1.5；}/样式就这么简单。这篇文章还真没什么可写的，权当记录吧。

截图效果如下：