<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别人的代码加自己稍稍改动一点,搞出来也花了2-3个小时,以防下次又忘记