• 基于Vue+ELement搭建动态树与数据表格实现分页

    🎉🎉欢迎来到我的CSDN主页！🎉🎉

    🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

    🌟推荐给大家我的专栏《ELement》。🎯🎯

    👉点击这里，就可以查看我的主页啦！👇👇

    Java方文山的个人主页

    🎁如果感觉还不错的话请给我点赞吧！🎁🎁

    💖期待你的加入，一起学习，一起进步！💖💖

    请添加图片描述

    目录

    一、前言

    二、左侧动态树实现

    2.1.后台数据接口定义

    2.2.前端导航菜单绑定

    2.3.根据数据渲染页面

    2.4.动态路由实现

    三、右侧内容数据表格

    3.1.根据文档搭建页面

    3.2.实现模糊查询

    四、分页实现

    一、前言

    在上一篇博文我们搭建了首页导航和左侧菜单，但是我们的左侧菜单是死数据今天我们就来把死的变成活的，并且完成右侧内容的书籍数据表格的展示与分页效果，话不多说上代码！！

    二、左侧动态树实现

    2.1.后台数据接口定义

    首先我们将后端的代码写好Controller层代码

    1. package com.zking.ssm.controller;
    2.  
    3. import com.zking.ssm.model.Module;
    4. import com.zking.ssm.model.RoleModule;
    5. import com.zking.ssm.model.TreeNode;
    6. import com.zking.ssm.service.IModuleService;
    7. import com.zking.ssm.util.JsonResponseBody;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.stereotype.Controller;
    10. import org.springframework.web.bind.annotation.RequestMapping;
    11. import org.springframework.web.bind.annotation.ResponseBody;
    12.  
    13. import java.util.List;
    14.  
    15. @Controller
    16. @RequestMapping("/module")
    17. public class ModuleController {
    18.  
    19.     @Autowired
    20.     private IModuleService moduleService;
    21.  
    22.     @RequestMapping("/queryRootNode")
    23.     @ResponseBody
    24.     public JsonResponseBody> queryRootNode(){
    25.         try {
    26.             List modules = moduleService.queryRootNode(-1);
    27.             return new JsonResponseBody<>("OK",true,0,modules);
    28.         } catch (Exception e) {
    29.             e.printStackTrace();
    30.             return new JsonResponseBody<>("初始化首页菜单错误",false,0,null);
    31.         }
    32.     }
    33.  
    34.     @RequestMapping("/queryElementTree")
    35.     @ResponseBody
    36.     public JsonResponseBody> queryElementTree(){
    37.         try {
    38.             List modules = moduleService.queryTreeNode(-1);
    39.             return new JsonResponseBody<>("OK",true,0,modules);
    40.         } catch (Exception e) {
    41.             e.printStackTrace();
    42.             return new JsonResponseBody<>("初始化ElementUI的Tree组件错误",false,0,null);
    43.         }
    44.     }
    45.  
    46.     @RequestMapping("/addRoleModule")
    47.     @ResponseBody
    48.     public JsonResponseBody addRoleModule(RoleModule roleModule){
    49.         try {
    50.             moduleService.addRoleModule(roleModule);
    51.             return new JsonResponseBody<>("新增角色权限成功",true,0,null);
    52.         } catch (Exception e) {
    53.             e.printStackTrace();
    54.             return new JsonResponseBody<>("新增角色权限失败",false,0,null);
    55.         }
    56.     }
    57.  
    58.     @RequestMapping("/queryModuleByRoleId")
    59.     @ResponseBody
    60.     public JsonResponseBody> queryModuleByRoleId(RoleModule roleModule){
    61.         try {
    62.             List modules = moduleService.queryModuleByRoleId(roleModule);
    63.             return new JsonResponseBody<>("OK",true,0,modules);
    64.         } catch (Exception e) {
    65.             e.printStackTrace();
    66.             return new JsonResponseBody<>("获取角色权限失败",false,0,null);
    67.         }
    68.     }
    69. }

    由此我们可知后端查询的树形菜单的接口为：http://localhost:8080/ssm/module/queryRootNode

    2.2.前端导航菜单绑定

    数据有了我们只用考虑怎么通过Vue拿到数据以及展示数据就可以了。

    找到src下面的api目录下的action.js文件添加下列接口

      'SYSTEM_USER_MODULE': '/module/queryRootNode', //左侧菜单

     在LeftNav.vue中的钩子函数内编写方法去到后端拿取数据赋予变量

    1. created() {
    2.       this.$root.Bus.$on('aaa', r => {
    3.         this.collapsed = r;
    4.       });
    5.       //加载页面先去后端拿数据
    6.       let url = this.axios.urls.SYSTEM_USER_MODULE;
    7.       this.axios.get(url, {}).then(r => {
    8.         this.menus=r.data.rows
    9.       }).catch(e => {
    10.  
    11.       })
    12.  
    13.     }

    并在data中定义变量 menus:[]

     menus:[]

    2.3.根据数据渲染页面

    去到我们ELement查找相应的代码进行cv，下面是我找好的你们直接用，我们现在只需要将后端获取到的数据在上面的代码中进行遍历即可。

    1.         
    2.       <el-submenu v-for="m in menus" :index="'ind_'+m.id" :key="'key_'+m.id">
    3.         <template slot="title">
    4.           <i :class="m.icon">i>
    5.           <span>{{m.text}}span>
    6.         template>
    7.         <el-menu-item  v-for="ms in m.modules" :index="ms.url" :key="'key_'+ms.id">
    8.           <i :class="ms.icon">i>
    9.           <span>{{ms.text}}span>
    10.         el-menu-item>
    11.       el-submenu>

    效果展示：

    2.4.动态路由实现

    我们点击下方的子菜单肯定会显示右侧白框里面的内容，所以我们需要实现动态路由

    ①实现路由跳转及当前项的设置

    1. default-active="$route.path">
    2. 	<el-menu-item index="/company/userManager">用户管理el-menu-item>

    注意事项：

    ①要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。

    ②导航当前项，在el-menu标签中绑定 :default-active="$route.path"，注意是绑定属性，不要忘了加“:”，当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。

    ③el-submenu标签中的url属性不能为空，且不能相同，否则会导致多个节点收缩/折叠效果相同的问题。

    ②生成相对应的Vue文件

    根据我们点击子菜单所显示的层级关系进行Vue组件的编写，下面以书本管理下面的新增书本为例

    AddBook.Vue

    2.  
    3. <script>
    4. script>
    5.  
    6. <style>
    7. style>

    ③配置路由与路由路径的关系 

    index.js

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. import AppMain from '@/components/AppMain'
    5. import LeftNav from '@/components/LeftNav'
    6. import TopNav from '@/components/TopNav'
    7.  
    8. import Login from '@/views/Login'
    9. import Registered from '@/views/Registered'
    10. import AddBook from '@/views/book/AddBook'
    11. import BookList from '@/views/book/BookList'
    12.  
    13.  
    14. Vue.use(Router)
    15.  
    16. export default new Router({
    17.   routes: [{
    18.     path: '/',
    19.     name: 'Login',
    20.     component: Login
    21.   }, {
    22.     path: '/Registered',
    23.     name: 'Registered',
    24.     component: Registered
    25.   }, {
    26.     path: '/AppMain',
    27.     name: 'AppMain',
    28.     component: AppMain,
    29.     children: [{
    30.       path: '/LeftNav',
    31.       name: 'LeftNav',
    32.       component: LeftNav
    33.     }, {
    34.       path: '/TopNav',
    35.       name: 'TopNav',
    36.       component: TopNav
    37.     }, {
    38.       path: '/book/AddBook',
    39.       name: 'AddBook',
    40.       component: AddBook
    41.     }, {
    42.       path: '/book/BookList',
    43.       name: 'BookList',
    44.       component: BookList
    45.     }]
    46.   }]
    47. })

    ④将组件渲染到页面上

    在AppMain.js中显示组件就需要加上

    2.  
    3. <script>
    4.   // 导入组件
    5.   import TopNav from '@/components/TopNav.vue'
    6.   import LeftNav from '@/components/LeftNav.vue'
    7.  
    8.   // 导出模块
    9.   export default {
    10.     components: {
    11.       TopNav,LeftNav
    12.     },data() {
    13.       return {
    14.         asideClass: "main-aside"
    15.       }
    16.     },
    17.     created(){
    18.       this.$root.Bus.$on('aaa',r=>{
    19.         this.asideClass=r ? 'main-aside-collapsed':'main-aside';
    20.       });
    21.     }
    22.   };
    23. script>
    24. <style scoped>
    25.   .main-container {
    26.     height: 100%;
    27.     width: 100%;
    28.     box-sizing: border-box;
    29.   }
    30.  
    31.   .main-aside-collapsed {
    32.     /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    33.     width: 64px !important;
    34.     height: 100%;
    35.     background-color: #334157;
    36.     margin: 0px;
    37.   }
    38.  
    39.   .main-aside {
    40.     width: 240px !important;
    41.     height: 100%;
    42.     background-color: #334157;
    43.     margin: 0px;
    44.   }
    45.  
    46.   .main-header,
    47.   .main-center {
    48.     padding: 0px;
    49.     border-left: 2px solid #333;
    50.   }
    51. style>

    效果演示：

    三、右侧内容数据表格

    3.1.根据文档搭建页面

    首先我们分析一下，我们右侧有那些内容？然后去到我们ELementUI官网查找相对应的案例代码，我们首先需要一个form表单提供我们输入书籍名称进行模糊查询，还需要数据表格展示数据，其次就是底部的分页条来完成分页效果，知道了需求我们直接去找案例代码即可。

    AddBook.js

    2.  
    3.  
    4.  
    5.  
    6. <script>
    7.   export default {
    8.     data() {
    9.       return {
    10.         bookname: "",
    11.         tableData: []
    12.       }
    13.     },
    14.     methods: {
    15.  
    16.     }
    17.   }
    18. script>
    19.  
    20.  
    21.  
    22. <style>
    23.   .el-table .warning-row {
    24.     background: oldlace;
    25.   }
    26.  
    27.   .el-table .success-row {
    28.     background: #f0f9eb;
    29.   }
    30. style>

    这样我们的基本内容就搭建完成了 

    3.2.实现模糊查询

    和前面一样我们先去后端将接口定义好

    1. package com.zking.ssm.controller;
    2.  
    3. import com.zking.ssm.model.Book;
    4. import com.zking.ssm.service.IBookService;
    5. import com.zking.ssm.util.JsonResponseBody;
    6. import com.zking.ssm.util.PageBean;
    7. import com.zking.ssm.vo.BookFileVo;
    8. import org.apache.commons.io.IOUtils;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.stereotype.Controller;
    11. import org.springframework.web.bind.annotation.RequestMapping;
    12. import org.springframework.web.bind.annotation.ResponseBody;
    13. import org.springframework.web.multipart.MultipartFile;
    14.  
    15. import javax.servlet.http.HttpServletRequest;
    16. import javax.servlet.http.HttpServletResponse;
    17. import java.io.File;
    18. import java.io.FileInputStream;
    19. import java.io.InputStream;
    20. import java.io.OutputStream;
    21. import java.net.URLEncoder;
    22. import java.util.List;
    23. import java.util.Map;
    24.  
    25. @Controller
    26. @RequestMapping("/book")
    27. public class BookController {
    28.  
    29.     @Autowired
    30.     private IBookService bookService;
    31.  
    32.     @RequestMapping("/addBook")
    33.     @ResponseBody
    34.     public JsonResponseBody addBook(Book book){
    35.         try {
    36.             bookService.insert(book);
    37.             return new JsonResponseBody<>("新增书本成功",true,0,null);
    38.         } catch (Exception e) {
    39.             e.printStackTrace();
    40.             return new JsonResponseBody<>("新增书本失败",false,0,null);
    41.         }
    42.     }
    43.  
    44.     @RequestMapping("/editBook")
    45.     @ResponseBody
    46.     public JsonResponseBody editBook(Book book){
    47.         try {
    48.             bookService.updateByPrimaryKey(book);
    49.             return new JsonResponseBody<>("编辑书本成功",true,0,null);
    50.         } catch (Exception e) {
    51.             e.printStackTrace();
    52.             return new JsonResponseBody<>("编辑书本失败",false,0,null);
    53.         }
    54.     }
    55.  
    56.     @RequestMapping("/delBook")
    57.     @ResponseBody
    58.     public JsonResponseBody delBook(Book book){
    59.         try {
    60.             bookService.deleteByPrimaryKey(book.getId());
    61.             return new JsonResponseBody<>("删除书本成功",true,0,null);
    62.         } catch (Exception e) {
    63.             e.printStackTrace();
    64.             return new JsonResponseBody<>("删除书本失败",false,0,null);
    65.         }
    66.     }
    67.  
    68.     @RequestMapping("/queryBookPager")
    69.     @ResponseBody
    70.     public JsonResponseBody> queryBookPager(Book book, HttpServletRequest req){
    71.         try {
    72.             PageBean pageBean=new PageBean();
    73.             pageBean.setRequest(req);
    74.             List books = bookService.queryBookPager(book, pageBean);
    75.             return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
    76.         } catch (Exception e) {
    77.             e.printStackTrace();
    78.             return new JsonResponseBody<>("分页查询书本失败",false,0,null);
    79.         }
    80.     }
    81.  
    82.     @RequestMapping("/queryBookCharts")
    83.     @ResponseBody
    84.     public JsonResponseBody queryBookCharts(){
    85.         try{
    86.             Map charts = bookService.queryBookCharts();
    87.             return new JsonResponseBody<>("OK",true,0,charts);
    88.         }catch (Exception e){
    89.             e.printStackTrace();
    90.             return new JsonResponseBody<>("查询统计分析数据失败",false,0,null);
    91.         }
    92.     }
    93.  
    94.     @RequestMapping("/upload")
    95.     @ResponseBody
    96.     public JsonResponseBody upload(BookFileVo bookFileVo){
    97.         try {
    98.             MultipartFile bookFile = bookFileVo.getBookFile();
    99.             System.out.println(bookFileVo);
    100.             System.out.println(bookFile.getContentType());
    101.             System.out.println(bookFile.getOriginalFilename());
    102.             return new JsonResponseBody<>("上传成功",true,0,null);
    103.         } catch (Exception e) {
    104.             e.printStackTrace();
    105.             return new JsonResponseBody<>("上传失败",false,0,null);
    106.         }
    107.     }
    108.  
    109.     @RequestMapping("/download")
    110.     public void download(HttpServletRequest request, HttpServletResponse response){
    111.         try {
    112.             String relativePath = "uploads/1.jpg";
    113.             String absolutePath = request.getRealPath(relativePath);
    114.             InputStream is = new FileInputStream(new File(absolutePath));
    115.             OutputStream out = response.getOutputStream();
    116.             response.setContentType("application/octet-stream");
    117.             response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
    118.             byte[] by = new byte[1024];
    119.             int len = -1;
    120.             while (-1 != (len = is.read(by))) {
    121.                 out.write(by);
    122.             }
    123.             is.close();
    124.             out.close();
    125.         } catch (Exception e) {
    126.             e.printStackTrace();
    127.         }
    128.     }
    129.  
    130.     @RequestMapping("/downloadUrl")
    131.     public void downloadUrl(HttpServletRequest request, HttpServletResponse response){
    132.         String relativePath = "uploads/1.jpg";
    133.         String absolutePath = request.getRealPath(relativePath);
    134.         InputStream is = null;
    135.         OutputStream out = null;
    136.  
    137.         try {
    138.             is = new FileInputStream(new File(absolutePath));
    139.             // 设置Content-Disposition
    140.             response.setHeader("Content-Disposition",
    141.                     "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
    142.             out = response.getOutputStream();
    143.             IOUtils.copy(is, out);
    144.             response.flushBuffer();
    145.             System.out.println("完成");
    146.         } catch (Exception e) {
    147.             e.printStackTrace();
    148.         } finally {
    149.             IOUtils.closeQuietly(is);
    150.             IOUtils.closeQuietly(out);
    151.         }
    152.     }
    153. }
    154.

     由此我们可知后端查询书籍的接口为：http://localhost:8080/ssm/book/queryBookPager

     action.js文件添加下列接口

    'BOOK_LIST': '/book/queryBookPager', //书籍查询

     在AddBook.vue中的钩子函数内编写方法去到后端拿取数据赋予变量

    1.  created() {
    2.       //加载页面先去后端拿数据
    3.       let params={
    4.         bookname:this.bookname
    5.       }
    6.       let url = this.axios.urls.BOOK_LIST;
    7.       this.axios.get(url, {params:params}).then(r => {
    8.         console.log(r)
    9.         this.tableData = r.data.rows
    10.       }).catch(e => {
    11.  
    12.       })
    13.  
    14.     }

    由于不止我们初始页面需要用到这个方法模糊查询也要所以我们将该代码进行封装让它有复用性

    1.     methods: {
    2.       //封装查询方法
    3.       list(params) {
    4.         let url = this.axios.urls.BOOK_LIST;
    5.         this.axios.get(url, {
    6.           params: params
    7.         }).then(r => {
    8.           console.log(r)
    9.           this.tableData = r.data.rows
    10.         }).catch(e => {
    11.  
    12.         })
    13.       },
    14.       //模糊查询方法
    15.       query() {
    16.         let params = {
    17.           bookname: this.bookname
    18.         }
    19.         this.list(params)
    20.       }
    21.     },
    22.     created() {
    23.       //加载页面先去后端拿数据
    24.       let params = {
    25.         bookname: this.bookname
    26.       }
    27.       this.list()
    28.  
    29.     }

    效果展示：

    四、分页实现

    更改我们的分页栏代码并定义变量，编写分页栏中自带的两个方法，一个是页码发生变化会触发一个是页数发生改变会触发。

    2.     <div class="block">
    3.       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    4.         :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
    5.         :total="total">
    6.       el-pagination>
    7.     div>

    效果展示：

    请添加图片描述

    到这里我的分享就结束了，欢迎到评论区探讨交流！！

    💖如果觉得有用的话还请点个赞吧 💖

  • 相关阅读:
    与商超便利店巨头内卷“即时零售”
    CEC2018：动态多目标测试函数DF10~DF14的PS及PF
    7-5 最大子矩阵和问题
    通过字符设备驱动的分步实现编写LED驱动，另外实现特备文件和设备的绑定
    策略模式在springboot中的使用
    SpringBoot 01: JavaConfig + @ImportResource + @PropertyResource
    idea项目找不到符号
    登场即王炸！木牛4D成像雷达迭代升级，挑战高阶智驾感知最高性能
    “Fatal error compiling: 无效的目标发行版: 11“的解决
    springboot + layui + pageHepler 实现table 表格分页并且多行小计功能
  • 原文地址：https://blog.csdn.net/weixin_74318097/article/details/133313100