Java后端+Elementui前端=树形JSON数据+级联选择器

2023-06-21 17:38| 来源: 网络整理| 查看: 265

文章目录一、数据库表设计二、级联选择器的使用1.1 级联选择器需要的数据格式1.2 模版代码1.3 JS代码三、后端实现3.1 定义Dto3.2 编写树工具类3.3 服务实现类四、前端测试4.1 响应数据4.2 递归解决暂无数据的问题

一、数据库表设计

Alt

二、级联选择器的使用 1.1 级联选择器需要的数据格式

级联选择器需要的数据格式是一个嵌套的层级结构，每一层代表一个分类，它的子节点是下一层级的分类，最后一层是最终的选项，通常使用一个数组来表示整个层级结构。该数组中的每个元素都是一个对象，包含以下属性：

value ：当前选项的值，通常是一个字符串或者数字，用于前后端交互label ：当前选项的文本标签，通常是一个字符串，用于页面展示children ：当前选项的子选项，是一个可选的子数组，代表当前选项的下一级分类。如果当前选项没有子选项，则该属性可以省略

**结构示例：**一个一级分类，该分类下面有一个二级分类，二级分类下面又包含了两个三级分类

[ { "typeId": "C1", "typeName": "一级分类1", "typeLevel": 1, "children": [ { "typeId": "C11", "typeName": "二级分类1-1", "typeLevel": 2, "typePid": 1, "children": [ { "typeId": "C111", "typeName": "三级分类1-1-1", "typeLevel": 3, "typePid": 2 }, { "typeId": "C112", "typeName": "三级分类1-1-2", "typeLevel": 3, "typePid": 2 } ] } ] } ] 1.2 模版代码属性名描述类型v-model双向绑定值，即选中的值，用于传入后台，数组类型Arrayoptions级联选择器的数据源Arrayprops配置级联选择器的属性，多选、选项属性等Objectcollapse-tags折叠显示标签Booleanchange选中节点触发的事件Functionclearable是否支持清空选项Boolean 1.3 JS代码 data() { return { selectKeys:[], typeList:[], casProps: { multiple: true, value: 'typeId', label: 'typeName', children: 'children' } } }, 属性名描述类型multiple设置多选Booleanvalue选项实际值String / Numberlabel选项文本值Stringchildren选择子节点Array methods: { async getTypeList() { let res = await cloTypeApi.getTree(); cosole.log(res); this.typeList = res }, // 当用户在级联菜单中选择内容改变时触发 selectKeysChanged() { // 回调参数：当前选中节点 console.log(selectkeys); } } 三、后端实现 3.1 定义Dto

定义Dto类，用于数据传输

添加 Listchildren 属性, 用于存储子节点

@Data public class ClothesTypeDto { private Integer id; private String typeId; private String typeName; private String typePid; private Integer typeLevel; private List children; }

注：ClothesType和ClothesTypeDto的区别只是多了children属性，后续会使用 BeanUtils 工具类进行对象属性拷贝

3.2 编写树工具类 package com.example.clothes.utils; import com.example.clothes.domain.dto.ClothesTypeDto; import com.example.clothes.domain.entity.ClothesType; import org.springframework.beans.BeanUtils; import java.util.ArrayList; import java.util.List; public class ClothesTypeTreeUtils { /** * 将查询结果转换成树形结构。 * * @param dataList 查询结果列表 * @param rootId 根节点ID * @return List 树形结构数据列表 */ public static List convertToTree(List dataList, String rootId) { // 定义树形结构数据列表 List treeList = new ArrayList(); // 遍历查询结果列表，将每个节点添加到对应的父节点下面 for (ClothesType data : dataList) { // 找到当前节点的父节点ID String parentId = data.getTypePid(); // 如果当前节点是根节点或者其父节点ID等于根节点ID，则将其添加到树形结构数据列表中 if (rootId.equals(parentId)) { ClothesTypeDto node = new ClothesTypeDto(); BeanUtils.copyProperties(data, node); node.setChildren(new ArrayList()); treeList.add(node); } else { // 在已有的树形结构数据列表中查找父节点 ClothesTypeDto parentNode = findNode(treeList, parentId); if (parentNode != null) { // 创建子节点，并将其添加到父节点的子节点列表中 ClothesTypeDto node = new ClothesTypeDto(); BeanUtils.copyProperties(data, node); node.setChildren(new ArrayList()); parentNode.getChildren().add(node); } } } return treeList; } /** * 在树形数据列表中查找指定节点。 * * @param treeList 树形结构数据列表 * @param nodeId 要查找的节点ID * @return ClothesTypeDto 查找到的节点对象，如果未找到则返回null */ private static ClothesTypeDto findNode(List treeList, String nodeId) { for (ClothesTypeDto node : treeList) { if (node.getTypeId().equals(nodeId)) { return node; } else { ClothesTypeDto foundNode = findNode(node.getChildren(), nodeId); if (foundNode != null) { return foundNode; } } } return null; } } 3.3 服务实现类 @Service public class ClothesTypeServiceImpl extends ServiceImpl implements ClothesTypeService { /** * 查询一颗树 * @return dto列表 */ @Override public List getTree() { List list = this.list(); List treeList = ClothesTypeTreeUtils.convertToTree(list, "1"); return treeList; } } 四、前端测试 4.1 响应数据 { "code": 1, "msg": null, "data": [ { "id": 2, "typeId": "1-5", "typeName": "功能装", "typePid": "1", "typeLevel": 1, "children": [ { "id": 3, "typeId": "1-5-1", "typeName": "家居服", "typePid": "1-5", "typeLevel": 2, "children": [ { "id": 4, "typeId": "1-5-1-1", "typeName": "睡衣套装", "typePid": "1-5-1", "typeLevel": 3, "children": [] }, { "id": 5, "typeId": "1-5-1-2", "typeName": "睡裙", "typePid": "1-5-1", "typeLevel": 3, "children": [] } ] } ] } ], "map": {} } 4.2 递归解决暂无数据的问题

这个时候还存在一个问题，最后一级显示「暂时数据」，原因是children数组为空，最后一级数据不会被组件正确渲染 Alt

解决方法：使用递归，当children数组为空时，设为undefined

getTree(data) { for (let i = 0; i this.getTree(data[i].children); } else { data[i].children = undefined; } } return data; },

【本文地址】

公司简介

联系我们