Vue 动态树，数据表格，分页

数据库数据

左侧树形菜单数据

书籍数据

动态树

后台查询

前台

左侧树形菜单

<template>
	<el-menu router :default-active="$router.path" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
	 active-text-color="#ffd04b" :collapse="leftCollapsed">
		<!--  -->
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>


		<el-menu-item index="/Home">
			<i class="el-icon-s-home"></i>
			<span slot="title">首页</span>
		</el-menu-item>

		<el-submenu v-for="node in treeNodes" :key="'key-'+node.id" :index="'index-'+node.id">
			<template slot="title">
				<i :class="node.icon"></i>
				<span slot="title">{{node.text}}</span>
			</template>
			<el-menu-item v-for="nodex in node.children" :key="'key-'+nodex.id" :index="nodex.url">
				<i :class="nodex.icon"></i>
				<span slot="title">{{nodex.text}}</span>
			</el-menu-item>


		</el-submenu>

	</el-menu>
</template>
<script>
	export default {
		name: 'LeftAside',
		props: ['leftCollapsed'],
		data: function() {
			return {
				treeNodes: []

			}
		},
		created: function() {
			let params = {
				'methodName': 'queryTreeNode'
			};
			let url = this.axios.urls.SYSTEM_MODULE_TREENODE;
			this.axios.get(url, {
				params: params
			}).then(resp => {
				 console.log(resp); 
				this.treeNodes = resp.data.data;
				/* console.log(this.treeNodes); */
			}).catch(resp => {

			});
			//配置首页默认打开
			this.$router.push('/Home');
		}


	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 240px;
		min-height: 400px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
		text-align: left;
	}

	.el-menu-item-group__title {
		padding: 0px;
	}

	.el-menu-bg {
		background-color: #1f2d3d !important;
	}

	.el-menu {
		border: none;
	}

	.logobox {
		height: 40px;
		line-height: 40px;
		color: #9d9d9d;
		font-size: 20px;
		text-align: center;
		padding: 20px 0px;
	}

	.logoimg {
		height: 40px;
	}
</style>

数据表格，分页

样式都是从官网Ctrl+C,然后微调

<template>
	<div>
		<el-breadcrumb separator="/" style="padding-top:20px ;">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>书本管理</el-breadcrumb-item>
    </el-breadcrumb>
	
	<el-form :inline="true" class="demo-form-inline" style="margin-top: 15px;">
      <el-form-item label="书本名称">
        <el-input v-model="bookname"></el-input>
      </el-form-item>
      <el-form-item>
		   <el-button @click="query(1)" icon="el-icon-search" circle></el-button>
        
      </el-form-item>
    </el-form>
	
	<!-- 表格 -->
	<el-table :data="result" style="width: 100%;" :border="true" max-height="550">
   <el-table-column :index="indexMethod" type="index"></el-table-column>
      <el-table-column prop="id" label="书本编号" min-width="30" align="center"></el-table-column>
      <el-table-column prop="bookname" label="书本名称" min-width="30"></el-table-column>
      <el-table-column prop="price" label="书本价格" min-width="70"></el-table-column>
      <el-table-column prop="booktype" label="书本类型" min-width="70"></el-table-column>
    </el-table>
	
	
	<!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="rows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
	</div>
	
</template>

<script>
	export default {
		data: function() {
			return {
				 bookname:null,
				 result:[],
				 total:0,
				 page:1,
				 rows:10,
				 scope:"",
				 title:'新增书本',
				 dialogFormVisiblee:false,
				 formLabelWidth:'80px',
				 
		},
		methods:{

			//自定义索引
			indexMethod:function(index){
				
				return index*1;
			},
			query: function(page) {
				if(page!=null){
					this.page=page;
				}
				let url=this.axios.urls.SYSBOOK_BOOKLIST;
				let params={
					bookname:this.bookname,
					methodName:'queryBookPager',
					page:this.page,
					rows:this.rows
				};
				
				
				this.axios.post(url,params).then(resp=>{
					console.log(resp.data.data.rows);
					this.result=resp.data.data.rows;
					this.total=resp.data.data.total;
				}).catch(resp=>{
					
					
				});

			},
			handleSizeChange:function(rows){
				this.rows=rows
				this.query(null);
				
			},
			handleCurrentChange:function(page){
				this.page=page;
				this.query(null);
				
			}
		}
	}
</script>

<style>

</style>

最后路由配置这个组件

import Vue from 'vue'
import Router from 'vue-router'
/* import HelloWorld from '@/components/HelloWorld' */
import Long from '@/views/Long'
import AddUser from '@/views/AddUser'
import Main from '@/components/Main'

import Home from '@/views/Home'
import BookList from '@/views/Book/BookList'
//解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(Router)

export default new Router({
  routes: [
    /* {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    } */
		
		{
			path: '/',
			name: 'Long',
			component: Long
		},
		{
			path: '/Long',
			name: 'Long',
			component: Long
		},
		{
			path: '/AddUser',
			name: 'AddUser',
			component: AddUser
		},
		{
			path: '/Main',
			name: 'Main',
			component: Main,
			children:[
				{
					path: '/Home',
					name: 'Home',
					component: Home
				},
				{
					path: '/Book/BookList',
					name: 'BookList',
					component: BookList
				}
			]
		}
		
		
		
  ]
})