<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個小時,以防下次又忘記