本文共 2175 字，大约阅读时间需要 7 分钟。

今天让我们使用SPA开发动态树+数据表格+分页

1.后台数据

t_vue_user t_vue_tree_node t_vue_articles 2.动态生成NavMenu导航菜单(只支持2级菜单) 2.1 结构

2.2 vue+element的el-menu组件实现路由跳转及当前项的设置

           
    
     用户管理
    
   

注1：要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。

注2：导航当前项，在el-menu标签中绑定 :default-active=“route.path”,注意是绑定属性，不要忘了加“:”,当 route.path",注意是绑定属性，不要忘了加“:”,当route.path",注意是绑定属性，不要忘了加“:”,当route.path等于el-menu-item标签中的index属性值时则该item为当前项。 注3：后台t_tree_node表有几个节点的url为空，则会导致几个节点样式会一致

2.3 数据表格

分页条

   		
   handleSizeChange(rows) {				this.formInline.page = 1;				this.formInline.rows = rows;				this.search();			},			handleCurrentChange(page) {				this.formInline.page = page;				this.search();			}

代码如下：

Articles.vue:
   

AppMain.vue

LeftNav.vue

index.js

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Login from '@/views/Login'import Reg from '@/views/Reg'import AppMain from '@/components/AppMain'import Articles from '@/views/sys/Articles'Vue.use(Router)export default new Router({	routes: [{			path: '/',			name: 'Login',			component: Login		},		{			path: '/Login',			name: 'Login',			component: Login		},		{			path: '/Reg',			name: 'Reg',			component: Reg		},		{			path: '/AppMain',			name: 'AppMain',			component: AppMain,			children:[				{					path: '/sys/Articles',					name: 'Articles',					component: Articles				}			]		}	]})

效果图：

转载地址：https://blog.csdn.net/shaobina/article/details/100402549 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！