vue element-ui实现一个多级折叠菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:vue element-ui实现一个多级折叠菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/elementui.css"> </head> <body translate="no"> <div id="app"> <tree-menu :routes="routes"></tree-menu> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/elementui.js"></script> <script> // vue-router数据结构 const routes = [{ name: 'home', path: '/home', meta: { text: '首页' } }, { name: 'inner', path: '/inner', meta: { text: '内部平台' }, children: [{ name: 'oa', path: 'oa', meta: { text: 'OA' } }, { name: 'jira', path: 'jira', meta: { text: 'Jira' } }, { name: 'wiki', path: 'wiki', meta: { text: 'Wiki' } }, { name: 'caiwu', path: 'caiwu', meta: { text: '财务' }, children: [{ name: 'chailv', path: 'chailv', meta: { text: '差旅' } }, { name: 'richang', path: 'richang', meta: { text: '日常' }, children: [{ name: 'taxi', path: 'taxi', meta: { text: '交通' } }, { name: 'tel', path: 'tel', meta: { text: '通信' } }] }] }] }, { name: 'sec', path: '/sec', meta: { text: '审核' .........完整代码请登录后点击上方下载按钮下载查看
网友评论0