SPA项目开发之动态树数据表格分页一.动态树功能1.动态生成NavMenu导航菜单(只支持2级菜单)1.1 结构el-menu key index el-submenu template slottitle i classel-icon-location/i span导航一/span /template template slottitle分组一/template el-menu-item route注1要实现路由跳转先要在el-menu标签上添加router属性然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。注2导航当前项在el-menu标签中绑定 :default-active“route.path”,注意是绑定属性不要忘了加“:”,当 route.path,注意是绑定属性不要忘了加“:”,当route.path,注意是绑定属性不要忘了加“:”,当route.path等于el-menu-item标签中的index属性值时则该item为当前项。注3后台t_tree_node表有几个节点的url为空则会导致几个节点样式会一致1.2所用的表t_vue_tree_node数据表格el-table :dataresult stylewidth: 100%; :bordertrue max-height550 el-table-column propid labelID min-width10 aligncenter/el-table-column el-table-column proptitle label标题 min-width20/el-table-column el-table-column propbody label内容 min-width70/el-table-column /el-table所用表t_vue_articlesLeftNav.vue 导航菜单代码template el-menu router :default-active$route.path default-active2 classel-menu-vertical-demo background-color#334157 text-color#fff active-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 classlogobox img classlogoimg src../assets/img/logo.png alt /div el-submenu :indexid_m.treeNodeId v-form in menus template slottitle i classm.icon/i span{{m.treeNodeName}}/span /template el-menu-item :keyid_m2.treeNodeId :indexm2.url v-form2 in m.children i :classm2.icon/i span{{m2.treeNodeName}}/span /el-menu-item /el-submenu /el-menu /template script export default { data(){ return{ collapsed:false, menus:[] } }, // created(){ this.$root.Bus.$on(collapsed-side,(v){ this.collapsedv; }) let url this.axios.urls.SYSTEM_MENU_TREE; // let urlhttp://localhost:8080/t216_SSH/vue/userAction_login.action; this.axios.post(url, this.ruleForm).then((response) { console.log(response); this.menus response.data.result; }).catch(function(error) { console.log(error); }); } } /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; } /style3路由在views下建一个目录并且定义一个Articles组件在src/router/index.js中加入Articles组件的路由配置import Vue from vue import Router from vue-router /* import HelloWorld from /components/HelloWorld */ import login from /views/login import Reg from /views/Reg import Articles from /views/sys/Articles import AppMain from /components/AppMain import LeftNav from /components/LeftNav import TopNav from /components/TopNav 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: /LeftNav, name: LeftNav, component: LeftNav }, { path: /TopNav, name: TopNav, component: TopNav }, { path: /sys/Articles, name: Articles, component: Articles } ] } ] })在AppMain.vue中加入一个锚点router-view/router-view4.绑定elementui提供的分页组件来完成分页功能Articles.vuetemplate div el-form :inlinetrue :modelformInline classuser-search el-form-item label搜索 el-input sizesmall v-modelformInline.title placeholder输入文章标题/el-input /el-form-item el-form-item el-button sizesmall typeprimary iconel-icon-search clicksearch搜索/el-button !-- el-button sizesmall typeprimary iconel-icon-plus clickhandleEdit()添加/el-button -- /el-form-item /el-form el-table :datalistData stylewidth: 100%; :bordertrue max-height550 el-table-column propid labelID min-width10 aligncenter/el-table-column el-table-column proptitle label标题 min-width20/el-table-column el-table-column propbody label内容 min-width70/el-table-column /el-table !-- 分页条 -- el-pagination stylemargin-top: 20px; size-changehandleSizeChange current-changehandleCurrentChange :current-pageformInline.page :page-sizes[10, 20, 30, 50] :page-size100 layouttotal, sizes, prev, pager, next, jumper :totaltotal /el-pagination /div /template script export default { data() { return { listData: [], formInline: { page: 1, rows: 10, title: }, total: 0 }; }, methods: { doSearch(params) { let url this.axios.urls.SYSTEM_ARTICLE_LIST; // let urlhttp://localhost:8080/t216_SSH/vue/userAction_login.action; this.axios.post(url, params).then((response) { console.log(response); this.listData response.data.result; this.total response.data.pageBean.total }).catch(function(error) { console.log(error); }); }, handleSizeChange(rows) { console.log(页大小发生了改变 rows) this.formInline.page 1; this.formInline.rows rows; this.doSearch(); }, handleCurrentChange(page) { console.log(页大小发生了改变 page) this.formInline.page page; this.search(); }, search() { this.doSearch(this.formInline); } }, created() { this.doSearch({}); } } /script style /styleaction.js/** * 对后台请求的地址的封装URL格式如下 * 模块名_实体名_操作 */ export default { SERVER: http://localhost:8080/T216_SSH, //服务器 SYSTEM_USER_DOLOGIN: /vue/userAction_login.action, //用户登陆 SYSTEM_USER_DOREG: /vue/userAction_reg.action, //用户注册 SYSTEM_MENU_TREE: /vue/treeNodeAction.action, //左侧树形菜单加载 SYSTEM_ARTICLE_LIST: /vue/articleAction_list.action, //文章列表 SYSTEM_ARTICLE_ADD: /vue/articleAction_add.action, //文章新增 SYSTEM_ARTICLE_EDIT: /vue/articleAction_edit.action, //文章修改 SYSTEM_ARTICLE_DEL: /vue/articleAction_del.action, //文章删除 SYSTEM_USER_GETASYNCDATA: /vue/userAction_getAsyncData.action, //vuex中的异步加载数据 getFullPath: k { //获得请求的完整地址用于mockjs测试时使用 return this.SERVER this[k]; } }