一、动态树
1.1 准备工作
1.1.1 准备数据库
1. 左侧导航栏
2. 书籍表
1.1.2 准备好后台服务接口，Moudel查询，和Book查询（支持分页）
1.1.3 修改mock.js测试环境
1.1.4 配置请求路径
在src/api/action.js中配置获取动态树数据的请求路径
'SYSTEM_MODULE_REQ': '/module/queryRootNode', //左侧菜单
1.2 构建导航菜单
1.2.1 通过接口获取数据
LeftNav.vue：
//声明周期钩子函数，此时的Vue实例已经创建，且data和methods已经创建，但没有开始编译模板 //利用该钩子函数获取动态树数据 created: function() { let url = this.axios.urls.SYSTEM_MODULE_REQ; this.axios.get(url, {}).then(resp => { console.log(resp.data); //在data中声明moduleDatas数组，接收返回的数据，以便于在template中使用数据双向绑定 this.moduleDatas = resp.data.rows; }).catch(resp => {}); }
通过打印resp.data数据，在控制台查看数据是否正常获取：
1.2.2 通过后台获取的数据构建菜单导航
动态生成菜单：
<template> <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#ffbf00" text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed"> <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> --> <div class="logobox"> <img class="logoimg" src="../assets/imgs/logo.png" alt=""> </div> <el-submenu v-for="m in moduleDatas" :key="'key_'+m.id" :index="'index_'+m.id"> <template slot="title"> <i :class="m.icon"></i> <span slot="title">{{m.text}}</span> </template> <!-- 使用v-for生成二级导航菜单，index为功能url值，二级菜单为叶子节点，为具体功能的功能菜单， 所以url一定有值（一级菜单的url为空）。 测试数据二级菜单没有分组，所以不用el-menu-item-group，只要生成el-menu-item即可。 --> <el-menu-item v-for="m2 in m.modules" :key="m2.id" :index="m2.url"> <span>{{m2.text}}</span> </el-menu-item> </el-submenu> </el-menu> </template>
1.3 点击菜单实现路由跳转
1.3.1 创建书本管理组件
在数据库中t_module_vue表中已经配置了功能url，为方便，将书本管理组件定义为BookList。如果使用其他名字则需要修改功能url配置，保持一致。
1.3.2 配置路由
1.3.3 修改LeftNav组件
要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
注1：导航当前项，在
el-menu标签中绑定 :default-active="$route.path"，注意是绑定属性，不要忘了加“:”，当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。注2：el-submenu标签中的url属性不能为空，且不能相同，否则会导致多个节点收缩/折叠效果相同的问题。
1.3.4 修改AppMain组件
1.3.5 效果展示
二、表格数据分页显示
2.1 前端页面和分页实现
页面上使用的面包屑，查询条件，表格，分页等空间，可以查看element-ui官网。该步骤主要关注页面布局，并没有绑定数据，编写完成后，观察页面效果。
BookList.vue：
<template> <div class="Book" style="padding: 30px;"> <!-- 输入框搜索 --> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="书籍名称 : "> <el-input v-model="bookname" placeholder="书籍名称"></el-input> </el-form-item> <el-form-item> <el-button type="warning" plain @click="onSubmit">查询</el-button> </el-form-item> </el-form> <!-- 书籍的书籍表格 --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="书籍ID"></el-table-column> <el-table-column prop="bookname" label="书籍名称"></el-table-column> <el-table-column prop="price" label="书籍价格"></el-table-column> <el-table-column prop="booktype" label="书籍类型"></el-table-column> </el-table> <!-- 分页 --> <div class="block" style="padding: 20px;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </div> </template> <script> export default { data() { return { bookname: '', tableData: [], rows: 10, total: 0, page: 1 } }, methods: { handleSizeChange(r) { //当页大小发生变化 let params = { bookname: this.bookname, rows: r, page: this.page } this.query(params); }, handleCurrentChange(p) { //当前页码大小发生变化 let params = { bookname: this.bookname, rows: this.rows, // 分页 page: p } // console.log(params) this.query(params); }, query(params) { //获取后台请求书籍数据的地址 let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ; this.axios.get(url, { params: params }).then(d => { this.tableData = d.data.rows; this.total = d.data.total; }).catch(e => {}); }, onSubmit() { let params = { bookname: this.bookname } console.log(params) this.query(params); this.bookname = '' } }, created() { this.query({}) } } </script> <style> </style>
2.2 效果展示
