elementUI + vue + 直接引用vue和element css和js 菜单组件递归
<html> <head> <title>element-ui demo</title> <meta charset="UTF-8"> <!-- 引入样式 --> <link href="http://www.mamicode.com/https:/unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div> <el-row> <el-col> <el-menu @open="handleOpen" @close="handleClose"> <menutree :data="menu_data"></menutree> </el-menu> </el-col> </el-row> </div> <template> <div> <label v-for="menu in data" :key="menu.index"> <el-submenu :index="menu.index" v-if="menu.children"> <template slot="title"> <span>{{menu.name}}</span> </template> <label> <menutree :data="menu.children"></menutree> </label> </el-submenu> <el-menu-item v-else :index="menu.index"> <span slot="title">{{menu.name}}</span> </el-menu-item> </label> </div> </template> <script src="http://www.mamicode.com/https:/unpkg.com/vue/dist/vue.js"></script> <!-- 引入组件库 --> <script src="http://www.mamicode.com/https:/unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: ‘#app‘, data: function () { return { visible: false, menu_data: [{ "index": "1", "name": "用户管理", "children": [{ "index": "1-2", "name": "用户列表", "children": [{ "index": "1-2-1", "name": "用户列表查询", "children": [{ "index": "1-2-1-1", "name": "用户列表查询", "children": [{ "index": "1-2-1-1-1", "name": "用户列表查询", "children": [{ "index": "1-2-1-1-1-1", "name": "用户列表查询" }] }] }] }] }] }, { "index": "2", "name": "角色管理" }, { "index": "3", "name": "用户管理" }, { "index": "4", "name": "角色管理" }] } }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } }, components: { menutree: { template: ‘#menutree‘, props: [‘data‘], name:‘menutree‘ } } }) </script> </body> </html>
网上几乎都是模块化(.vue后缀的文件)开发的,感觉前端这些有些高端,网不好,好像是用命令行弄环境和打包什么的,觉得很麻烦,搞不懂那些,就有点小排斥
不知道还有没有和我一样的,就当记录一下,毕竟连查带自己copy别人的代码,搞出来也花了3个小时,心碎了
elementUI + vue + 直接引用vue和element css和js 菜单组件递归
温馨提示: 本文由杰米博客推荐，转载请保留链接: https://www.jmwww.net/file/web/10183.html
