elementUI + vue + 直接引用vue和element css和js 菜单组件递归
Posted liyax
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了elementUI + vue + 直接引用vue和element css和js 菜单组件递归相关的知识，希望对你有一定的参考价值。
<html> <head> <title>element-ui demo</title> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-row class="tac"> <el-col> <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <menutree :data="menu_data"></menutree> </el-menu> </el-col> </el-row> </div> <template id="menutree"> <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="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入组件库 --> <script src="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 菜单组件递归的主要内容，如果未能解决你的问题，请参考以下文章