SPA项目开发之动态树+数据表格+分页

动态树功能：

在上次当中我们完成了首页导航加左侧菜单，在本章中就来实现动态树+数据表格+分页

通过调用后台查询方法查询t_vue_tree_node表的数据，将后台的数据全部给到menus中，然后通过v-for循环展示到菜单栏
LeftNav：

运行结果：

实现导航菜单：
通过:index来获取到数据库挑战的url路径，再加上router :default-active="$route.path"实现路由跳转，然后在AppMain里面给一个路由，最后配置index.js就可以了。

index.js：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import Articles from '@/views/sys/Articles'
import Login from '@/views/Login'
import Reg from '@/views/Reg'

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
				}
			]
		}
  ]
})

数据表格+分页查询
新增组件 Articles：

添加到路由中：

数据表格：
引用一个表单，通过调用后台查询文章的方法来获取到t_vue_articles的值，然后把值都给到listData，然后在表单中通过:data绑定listData，再通过prop直接引用数据库里的属性名就可以获得值了；
分页：
引用一个分页条，先给一个默认的formInline值，通过后台查询到的值把total的值给到分页条，由于我们实现数据表格查询表中的值的时候不需要分页，而调用分页条当中的handleSizeChange（页大小发生改变）与handleCurrentChange（当前页发生改变）事件的时候是需要向后台传入分页的参数（formInline），所以我们把使用url来调用后台查询方法的模块抽离出来，变成一个事件（doSeach），传入参数，而在查询数据表格的时候在created的时候调用当前方法（doSeach），传入的参数为空，需要分页时在methods给一个查询方法（search），传入的参数是formInline，在调用分页里的事件时就可以调用search方法来向后台传入需要分页的参数。

Articles：

查询只需要在formInline加入一个参数，然后在实现搜索框的时候调用search方法就可以了