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. 编写动态树形菜单

5. 页面效果演示

二、实现数据表格绑定及分页功能

1. 配置相应路径

        在action中配置数据访问路径

2.  编写数据表格显示及分页功能代码

BookList.vue

3. 演示效果

 

总结

        本期博客分享到此结束，今天给大家带来了动态树形菜单的功能实现和数据表格及分页效果的实现，两个功能实现了前后端结合，连接了数据库实现数据交互。其中使用到了ElementUI框架样式，大大减少了开发所需时间，提高了开发效率。后期博客中会进行功能增添完善，希望各位老铁能三连加关注支持一波。