ElementUI之动态树+数据表格+分页

目录

一.ElementUI动态树

编写left.vue界面

配置url

​编辑 

建立书籍的页面

编写路由

显示子主键的类

测试结果 

二.ElementUI数据表格+分页

在booklist中编写数据表格和分页

编写url路径

测试结果

​编辑 

---

一.ElementUI动态树

编写left.vue界面

配置url

 

建立书籍的页面

 

编写路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Login from '@/views/Login'
import Register from '@/views/Register'
import AddBook from '@/views/book/AddBook'
import BookList from '@/views/book/BookList'
 
Vue.use(Router)
 
export default new Router({
	routes: [{
			path: '/',
			name: 'Login',
			component: Login
 
		},
		{
			path: '/Register',
			name: 'Register',
			component: Register
 
		},
		{
			path: '/AppMain',
			name: 'AppMain',
			component: AppMain,
			children: [{
					path: '/LeftNav',
					name: 'LeftNav',
					component: LeftNav
 
				},
				{
					path: '/TopNav',
					name: 'TopNav',
					component: TopNav
				},
				{
						path: '/book/AddBook',
						name: 'AddBook',
						component: AddBook
				
					},
					{
						path: '/book/BookList',
						name: 'BookList',
						component: BookList
					}
			]
 
		}
 
	]
})

显示子主键的类

测试结果 

二.ElementUI数据表格+分页

在booklist中编写数据表格和分页

编写url路径

测试结果