中国制造网国际站,桂林网上服务,淘宝上网站建设好便宜,最佳外贸建站平台目录 前言
一、实现动态树形菜单
1. 配置相应路径
2. 创建组件
3. 配置组件与路由的关系
index.js
4. 编写动态树形菜单
5. 页面效果演示
二、实现数据表格绑定及分页功能
1. 配置相应路径
2. 编写数据表格显示及分页功能代码
BookList.vue
3. 演示效果
总结 前言…
目录 前言
一、实现动态树形菜单
1. 配置相应路径
2. 创建组件
3. 配置组件与路由的关系
index.js
4. 编写动态树形菜单
5. 页面效果演示
二、实现数据表格绑定及分页功能
1. 配置相应路径
2. 编写数据表格显示及分页功能代码
BookList.vue
3. 演示效果
总结 前言 在上期的博客中我与各位老铁分享了有关首页导航栏及左侧树形菜单的基本搭建样式今天的这期博客基于上期博客来实现左侧树形菜单与后台数据库进行动态绑定还有实现后台数据在前台显示及实现分页功能。老铁们仔细阅读观看 一、实现动态树形菜单
1. 配置相应路径 在action.js文件中配置左侧树形菜单回显页面的请求访问路径代码如下根据自身项目进行修改。 SYSTEM_MODULE: /module/queryRootNode, //左侧树形菜单显示访问路径 2. 创建组件 创建两个组件用于实现效果也为后续的做铺垫。创建一个AddBook.vue和BookList.vue组件。 3. 配置组件与路由的关系 将新创建的组件与路由进行关系绑定在index.js的文件中设置 index.js
import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorldimport AppMain from /components/AppMain
import LeftNav from /components/LeftNav
import TopNav from /components/TopNavimport Login from /views/book/AddBook
import Login from /views/book/BookListimport Login from /views/Login
import Register from /views/RegisterVue.use(Router)export default new Router({routes: [ //默认首页{path: /,name: Login,component: Login}, {path: /Register,name: Register,component: Register}, {path: /Login,name: Login,component: Login}, {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}]}]
})在AppMain.vue中添加一下代码否则效果实现不了 router-view/router-view 4. 编写动态树形菜单
templateel-menu router :default-active$route.path default-active2 classel-menu-vertical-demo background-color#334157 text-color#fffactive-text-color#ffd04b :collapsecollapsed!-- el-menu default-active2 :collapsecollapsed collapse-transition router :default-active$route.path unique-opened classel-menu-vertical-demo background-color#334157 text-color#fff active-text-color#ffd04b --div classlogoboximg classlogoimg src../assets/img/logo.png alt/divel-submenu v-form in menus :indexidx_m.id :keykey_m.idtemplate slottitlei classm.icon/ispan{{m.text}}/span/templateel-menu-item v-form2 in m.modules :indexm2.url :keykey_m2.idi classm2.icon/ispan{{m2.text}}/span/el-menu-item/el-submenu!-- el-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item --/el-menu
/template
scriptexport default {data() {return {collapsed: false,menus:[]}},created() {this.$root.Bus.$on(xxx, v {this.collapsed v;});// 向后台请求数据的访问路径let url this.axios.urls.SYSTEM_MODULE;this.axios.get(url, {}).then(r {console.log(r);this.menus r.data.rows;}).catch(e {})}}
/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;}
/style5. 页面效果演示 二、实现数据表格绑定及分页功能
1. 配置相应路径 在action中配置数据访问路径 2. 编写数据表格显示及分页功能代码
BookList.vue
templatediv classbooks stylepadding: 20px;!-- 1.搜索框 --el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名称el-input v-modelbookname placeholder书籍名称/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit搜索/el-button/el-form-item/el-form!-- 2.数据表格 --el-table :datatableData stripe stylewidth: 100%el-table-column propid label书籍编号 width180/el-table-columnel-table-column propbookname label书籍名称 width180/el-table-columnel-table-column propprice label书籍价格/el-table-columnel-table-column propbooktype label书籍类型/el-table-column/el-table!-- 3.分页条 --div classblock stylepadding: 20px;el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepage:page-sizes[10, 20, 30, 40] :page-sizerows layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div/div/templatescriptexport default {data() {return {bookname: ,tableData: [],rows:10,page:1,total:0}},methods: {// 定义一个查询的方法方便调用减少代码冗余query(params) {// 向后台请求数据的访问路径let url this.axios.urls.BookList;this.axios.get(url, {params: params}).then(r {console.log(r);this.tableData r.data.rows;this.total r.data.total;}).catch(e {})},onSubmit() {let params {bookname: this.bookname,}// 调用查询方法this.query(params);},handleSizeChange(r) { //当页大小发生变化// 输出查看console.log(当前页大小:r);let params {bookname: this.bookname,rows:r,page:this.page}// 调用查询方法this.query(params);},handleCurrentChange(p) { //当当前页页码大小发生变化// 输出查看console.log(当前页码:p);let params {bookname: this.bookname,page:p,rows:this.rows}// 调用查询方法this.query(params);}},created() {// 调用查询方法this.query({});}}
/scriptstyle
/style3. 演示效果 总结 本期博客分享到此结束今天给大家带来了动态树形菜单的功能实现和数据表格及分页效果的实现两个功能实现了前后端结合连接了数据库实现数据交互。其中使用到了ElementUI框架样式大大减少了开发所需时间提高了开发效率。后期博客中会进行功能增添完善希望各位老铁能三连加关注支持一波。
