关于ElementUI之动态树+数据表格+分页实例

目录

一.ElementUI动态树

 二.实例

2.1.数据表

 2.2.后端

2.3.前端

 三.书籍管理

3.1.数据表

3.2.后端

3.2.前端

  好啦今天就分享到这了，希望能帮到你哦！！！

---

一.ElementUI动态树

• ElementUI提供了一个动态树组件（Dynamic Tree），它允许开发人员在应用程序中创建动态的可展开和可折叠的树形结构。
• 动态树组件可以用于表示层次化的数据，例如文件目录结构、组织结构图、分类目录等。它为开发人员提供了一种简单而灵活的方式来展示和操作这些数据。
• 使用ElementUI的动态树组件，你可以通过提供数据源和自定义渲染函数来创建树形结构。数据源可以是一个包含树节点信息的数组，每个节点可以包含子节点或嵌套节点。渲染函数定义了每个节点在树中的呈现方式，你可以自定义节点的展示、图标、样式等。
• 动态树组件还支持节点的展开和折叠，开发人员可以根据需要对树进行交互操作。例如，你可以通过点击节点来展开或折叠子节点，或者通过选择节点来执行特定的操作。
• ElementUI的动态树组件提供了一系列的配置选项和事件，以满足不同场景下的需求。你可以自定义树的样式、节点的选择模式、展示的内容等。

总的来说，ElementUI的动态树组件是一个功能强大且易于使用的工具，可以帮助开发人员轻松地构建交互式的树形结构，并提供了丰富的功能和灵活的定制选项，以适应不同项目的需求。

 二.实例

2.1.数据表

数据表的创建及数据添加

表结构

表数据

 2.2.后端

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

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

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

 List queryChildNodeByPid(Integer id);

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

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

package com.zking.ssm.controller;
 
import com.zking.ssm.model.Module;
import com.zking.ssm.model.RoleModule;
import com.zking.ssm.model.TreeNode;
import com.zking.ssm.service.IModuleService;
import com.zking.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> queryRootNode(){
        try {
            List modules = moduleService.queryRootNode(-1);
            return new JsonResponseBody<>("OK",true,0,modules);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("初始化首页菜单错误",false,0,null);
        }
    }
 
}

2.3.前端

在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的组件代码中修改