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

目录

一.ElementUI动态树

编写left.vue界面

配置url

​编辑 

建立书籍的页面

编写路由

显示子主键的类

测试结果 

二.ElementUI数据表格+分页

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

编写url路径

测试结果

​编辑 


一.ElementUI动态树

编写left.vue界面



配置url
ElementUI之动态树+数据表格+分页_第1张图片 
建立书籍的页面

ElementUI之动态树+数据表格+分页_第2张图片 

编写路由
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之动态树+数据表格+分页_第3张图片

测试结果 

ElementUI之动态树+数据表格+分页_第4张图片

二.ElementUI数据表格+分页

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




编写url路径

ElementUI之动态树+数据表格+分页_第5张图片

测试结果
 

你可能感兴趣的:(elementui,vue.js,前端)