最近看了 Vue.js 的递归组件，实现了一个最基本的树形菜单。
main.js 作为入口：
import Vue from 'vue'
import main from './components/main.vue' new Vue({
el: '#app',
render: h => h(main)
})
它引入了一个组件 main.vue：
<template>
<div>
<my-tree :data="theData" :name="menuName" :loading="loading" @getSubMenu="getSubMenu"></my-tree>
</div>
</template> <script>
const myData = [
{
id: '1',
menuName: '基础管理',
menuCode: '10'
},
{
id: '2',
menuName: '商品管理',
menuCode: ''
},
{
id: '3',
menuName: '订单管理',
menuCode: '30',
children: [
{
menuName: '订单列表',
menuCode: '31'
},
{
menuName: '退货列表',
menuCode: '32',
children: []
}
]
},
{
id: '4',
menuName: '商家管理',
menuCode: '',
children: []
}
]; const subMenuData1 = {
parentId: '1',
children: [
{
menuName: '用户管理',
menuCode: '11'
},
{
id: '12',
menuName: '角色管理',
menuCode: '12',
children: [
{
menuName: '管理员',
menuCode: '121'
},
{
menuName: 'CEO',
menuCode: '122'
},
{
menuName: 'CFO',
menuCode: '123'
},
{
menuName: 'COO',
menuCode: '124'
},
{
menuName: '普通人',
menuCode: '124'
}
]
},
{
menuName: '权限管理',
menuCode: '13'
}
]
}; const subMenuData2 = {
parentId: '2',
children: [
{
menuName: '商品一',
menuCode: '21'
},
{
id: '22',
menuName: '商品二',
menuCode: '22',
children: [
{
menuName: '子类商品1',
menuCode: '221'
},
{
menuName: '子类商品2',
menuCode: '222'
}
]
}
]
}; import myTree from './common/treeMenu.vue'
export default {
components: {
myTree
},
data () {
return {
theData: myData,
menuName: 'menuName', // 显示菜单名称的属性
loading: false
}
},
methods: {
getSubMenu (menuItem, callback) {
this.loading = true; if (menuItem.id === subMenuData1.parentId) {
this.loading = false;
menuItem.children = subMenuData1.children;
callback(menuItem.children);
} setTimeout(() => {
if (menuItem.id === subMenuData2.parentId) {
this.loading = false;
menuItem.children = subMenuData2.children;
callback(menuItem.children);
}
}, 2000);
}
}
}
</script>
subMenuData1, subMenuData2 存放子菜单数据，可以从服务器获取，以实现动态加载。
该文件引入了树形组件 treeMenu.vue：
<template>
<ul class="tree-menu">
<li v-for="(item, index) in data">
<span @click="toggle(item, index)">
<i :class="['icon', item.children && item.children.length ? folderIconList[index] : 'file-text', loading ? loadingIconList[index] : '']"></i>
{{ item[name] || item.menuName }}
</span>
<tree-menu v-if="scope[index]" :data="item.children"></tree-menu>
</li>
</ul>
</template> <script>
export default {
name: 'treeMenu',
props: {
data: Array,
name: String,
loading: Boolean
},
data () {
return {
folderIconList: [],
loadingIconList: [],
scope: {}
}
},
created () {
this.data.forEach((item, index) => {
if (item.children && item.children.length) {
this.folderIconList[index] = 'folder';
}
});
},
methods: {
doTask (index) {
this.$set(this.scope, index, !this.scope[index]);
this.folderIconList[index] = this.scope[index] ? 'folder-open' : 'folder';
},
toggle (item, index) {
this.loadingIconList = []; if (item.children && item.children.length) {
this.doTask(index);
} else {
this.loadingIconList[index] = 'loading'; this.$emit('getSubMenu', item, (subMenuList) => {
if (subMenuList && subMenuList.length) {
this.doTask(index);
}
});
}
}
}
}
</script> <style scoped>
.tree-menu {
list-style: none;
}
.tree-menu li {
line-height: 2;
}
.tree-menu li span {
cursor: default;
}
.icon {
display: inline-block;
width: 15px;
height: 15px;
background-repeat: no-repeat;
vertical-align: -2px;
}
.icon.folder {
background-image: url(/src/assets/folder.png);
}
.icon.folder-open {
background-image: url(/src/assets/folder-open.png);
}
.icon.file-text {
background-image: url(/src/assets/file-text.png);
}
.icon.loading {
background-image: url(/src/assets/loading.gif);
background-size: 15px;
}
</style>
效果图：
示例代码放在这里。