Vue之ElementUI之动态树+数据表格+分页（项目功能）

目录

前言

一、实现动态树形菜单

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/HelloWorld'
 
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
 
import Login from '@/views/book/AddBook'
import Login from '@/views/book/BookList'
 
import Login from '@/views/Login'
import Register from '@/views/Register'
 
Vue.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中添加一下代码否则效果实现不了

 

4. 编写动态树形菜单