Question

Vue.js怎样把递归组件构建为树形菜单

Answer 1

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>

Answer 2

采用路由的重定向即可