Advertisement

ElementUI之动态树+数据表格+分页

阅读量：

🎬 艳艳耶✌️：个人主页

🔥 个人专栏 ：《Spring与Mybatis集成整合》《Vue.js使用》

⛺️ 生活的理想，为了不断更新自己 !

前言：

是一套基于Vue.js的桌面端组件库，由饿了么前端团队开发维护。它提供了丰富的UI组件和交互效果，可以帮助开发者快速构建出美观、易用的Web应用程序。ElementUI的背景可以追溯到2016年，当时饿了么团队正在开发一款新的后台管理系统，他们发现市面上缺乏一款符合他们需求的组件库，于是决定自己开发一套。经过两年的不断迭代和完善，ElementUI已经成为了Vue.js生态圈中非常受欢迎的组件库之一。

1.动态树

1.2数据表

数据表的创建及数据添加

表结构

表数据

1.3后端

在自动生成的名为 : ModuleMapper.xml 配置文件中编写动态SQL

复制代码 
   <!--先根据id查询菜单根级目录，再利用上次查询结果collection中column的值id作为递归查询条件，查出所有子菜单，返回结果必须为resultMap，并且值为上面构建的resultMap的id值-->

    
   <select id="queryChildNodeByPid" resultMap="BaseResultMap" parameterType="int">
    
     select <include refid="Base_Column_List"/> from t_module_vue
    
     where pid=#{value}
    
   </select>

在自动生成的接口 ModuleMapper 编写查询的方法

复制代码 
     List<Module> queryChildNodeByPid(Integer id);

并且在自己为菜单创建的接口里进行编写方法之后，再到实现类里面进行重新。

在控制器中编写访问方法的地址 名为:ModuleController

复制代码 
 package com.sy.ssm.controller;

    
  
    
 import com.sy.ssm.model.Module;
    
 import com.sy.ssm.model.RoleModule;
    
 import com.sy.ssm.model.TreeNode;
    
 import com.sy.ssm.service.IModuleService;
    
 import com.sy.ssm.util.JsonResponseBody;
    
 import org.springframework.beans.factory.annotation.Autowired;
    
 import org.springframework.stereotype.Controller;
    
 import org.springframework.web.bind.annotation.RequestMapping;
    
 import org.springframework.web.bind.annotation.ResponseBody;
    
  
    
 import java.util.List;
    
  
    
 @Controller
    
 @RequestMapping("/module")
    
 public class ModuleController {
    
  
    
     @Autowired
    
     private IModuleService moduleService;
    
  
    
     @RequestMapping("/queryRootNode")
    
     @ResponseBody
    
     public JsonResponseBody<List<Module>> queryRootNode(){
    
     try {
    
         List<Module> modules = moduleService.queryRootNode(-1);
    
         return new JsonResponseBody<>("OK",true,0,modules);
    
     } catch (Exception e) {
    
         e.printStackTrace();
    
         return new JsonResponseBody<>("初始化首页菜单错误",false,0,null);
    
     }
    
     }
    
  
    
     @RequestMapping("/queryElementTree")
    
     @ResponseBody
    
     public JsonResponseBody<List<TreeNode>> queryElementTree(){
    
     try {
    
         List<TreeNode> modules = moduleService.queryTreeNode(-1);
    
         return new JsonResponseBody<>("OK",true,0,modules);
    
     } catch (Exception e) {
    
         e.printStackTrace();
    
         return new JsonResponseBody<>("初始化ElementUI的Tree组件错误",false,0,null);
    
     }
    
     }
    
  
    
     @RequestMapping("/addRoleModule")
    
     @ResponseBody
    
     public JsonResponseBody<?> addRoleModule(RoleModule roleModule){
    
     try {
    
         moduleService.addRoleModule(roleModule);
    
         return new JsonResponseBody<>("新增角色权限成功",true,0,null);
    
     } catch (Exception e) {
    
         e.printStackTrace();
    
         return new JsonResponseBody<>("新增角色权限失败",false,0,null);
    
     }
    
     }
    
  
    
     @RequestMapping("/queryModuleByRoleId")
    
     @ResponseBody
    
     public JsonResponseBody<List<String>> queryModuleByRoleId(RoleModule roleModule){
    
     try {
    
         List<String> modules = moduleService.queryModuleByRoleId(roleModule);
    
         return new JsonResponseBody<>("OK",true,0,modules);
    
     } catch (Exception e) {
    
         e.printStackTrace();
    
         return new JsonResponseBody<>("获取角色权限失败",false,0,null);
    
     }
    
     }
    
 }

1.4前端

在src/api目录下增加action.js的地址配置：

复制代码 
 /** * 对后台请求的地址的封装，URL格式如下：
    
  * 模块名_实体名_操作
    
  */
    
 export default {
    
   'SERVER': 'http://localhost:8080/ssm', //服务器地址
    
   'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆请求
    
   'SYSTEM_USER_DOREG': '/user/userRegister', //注册请求
    
   'SYSTEM_MENU': '/module/queryRootNode', //左侧菜单导航数据请求
    
   'SYSTEM_BookList': '/book/queryBookPager', //书籍的后端数据请求
    
   'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    
     return this.SERVER + this[k];
    
   }
    
 }

AppMain.vue的组件代码中修改