当前位置：首页 > ops >正文

vue+springboot+element-ui实现table的树懒加载

ops 2025/8/16 22:34:56

概要

vue+springboot+element-ui实现table的树懒加载

整体架构流程

前端vue2,elment-ui,内置封装了axios使用es6导出的写法,js,css等
后端spring全家桶

技术细节

前端:调用elementui的组件Element - The world's most popular Vue UI framework

<el-table:data="biddData"style="width: 100%;margin-top: 10px"row-key="id":border="false"lazy:tree-props="{children: 'children', hasChildren: 'hasChildren'}"class="horizontal-line-table":header-cell-style="{background:'#42b983',color: '#ffffff'}"@selection-change="handleSelectionChange"ref="multipleTable"
>

这里主要就是将后端整理好的数据双向绑定表格里

 getMenuData() {setTimeout(() => {url.getMenusTree().then(res => {const fileTypeMap = {0: '测试目录',1: '测试目录二级',2: '测试目录三级',3: '测试文档一类',4: '测试文档二类',5: '测试文档三类'};// 定义递归处理函数const processTree = (nodes) => {return nodes.map(item => ({...item,filetype: fileTypeMap[item.filetype] || item.filetype,children: item.children ? processTree(item.children) : []}));};this.biddData = processTree(res.data);// console.log('处理后的数据:', this.biddData);});}, 100);},export function getMenusTree() {return request({url: '/xxx/ccc/ddd',method: 'get'})
}

这个写法是我项目框架的写法也可以直接使用axios大同小异,方法内部的操作是将某个字段进行转换
后端:

@RequiredArgsConstructor
@RestController
@RequestMapping("/aa/ss")
public class BiddInvestmentController {@Autowiredprivate SysBiddinveUnitService unitService;@RequestMapping("/getList")public R UnitList(){List<SysBiddinveUnit> list = unitService.getUnitList();return R.ok().put("data",list);}
}List<SysBiddinveUnit> getUnitList();/**** 查询所有数据并返回树形结构* @return*/@Overridepublic List<SysBiddinveUnit> getUnitList() {//查询所有数据List<SysBiddinveUnit> list = sysBiddinveUnitMapper.getUnitList();//建立map映射(id->index)HashMap<Integer,Integer> map = new HashMap<>();for (int index = 0; index < list.size(); index++) {Integer id = list.get(index).getId();map.put(id,index);}//处理数据for (int i = 0; i < list.size(); i++) {SysBiddinveUnit node = list.get(i);Integer pid = node.getPid();//有父级if (pid!=null){//找到pid的父级并把当前节点(node)放到父级节点的children里面Integer indexParent = map.get(pid);//获取父亲节点SysBiddinveUnit parent = list.get(indexParent);//判重if (parent.getChildren()==null){parent.setChildren(new ArrayList<>());}//向父亲节点的children添加当天nodeparent.getChildren().add(node);}}//过滤树的一级节点List<SysBiddinveUnit> collect = list.stream().filter(e -> e.getPid() == null).collect(Collectors.toList());return collect;}

@Data
public class SysBiddinveUnit {private Integer id;private Integer pid;private String code;private String uploadcode;private String filetype;private String filename;private String createtime;private String filestate;private String createBy;private String updateTime;private String updateBy;private String uploadname;private String mlname;private List<SysBiddinveUnit> children;}

小结

这里的业务其实很好理解,需要知道前端table需要的数据格式,然后搭建实体类,首先查出所有的数据,然后使用递归进行筛选父节点,获取id和pid进行遍历比对如果pid是null的或空的表示是顶级的也就是父级的然后如果pid等于父级id的表示是父级的子类然后判各重就放到chideren里,到这里就已经快变成我们想要的数据格式了,此时需要对树进行过滤过滤好之后就可以变成我们需要的JSON了此时放到list里返回前端即可

查看全文

http://www.xdnf.cn/news/7560.html