1.首先和大家看一下运行后的效果
2.element ui中el-tree的写法
el-tree是element uI的中树形结构的写法,主要使用的场景是在需要父级和子级的情况下使用,下面看一下前台的写法。
代码语言:javascript复制<el-tree
:data="sysMenuTreeData"
show-checkbox default-expand-all node-key="menuId"
ref="tree" highlight-current
:default-checked-keys='defaultExpandedKeys'
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
代码语言:javascript复制request({
url:'/sys/SysMenu/geButtonTreeData',
method: 'POST',
data: {}
}).then((res) => {
if (res.data != null) {
this.sysMenuTreeData = res.data;
} else {
this.sysMenuTreeData = "";
}
}).catch((response) => {
this.sysMenuTreeData="";
});
3.spring boot后台
java后台递归构造树形结构,其实很简单,设计表结构的时候定义父级字段和子级字段,然后定义一个树形结构的实体,比如treeDto,建立实体的父子级关系。然后把数据按照父子级关系循环递归就可以了。
首先定义一个实体dto
代码语言:javascript复制public class SysMenuTreeOutVo extends SysMenu {
private String id;
private String value;
private String label;
private List<SysMenuTreeOutVo> children;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getLabel() {
return label;
}
public void setLabel(String label) {
this.label = label;
}
public List<SysMenuTreeOutVo> getChildren() {
return children;
}
public void setChildren(List<SysMenuTreeOutVo> children) {
this.children = children;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
下面是controller的代码重点来了,循环递归数据
代码语言:javascript复制/**
* 获取菜单数据
* @return
*/
@RequestMapping(value = "/getMenuTree", method = {RequestMethod.GET, RequestMethod.POST})
@ResponseBody
public ResultInfo getSysRole() {
List<SysMenuTreeOutVo> sysMenuList = this.sysMenuService.getSysMenuTree();
List<SysMenuTreeOutVo> resultList = new ArrayList<SysMenuTreeOutVo>();
// 把数据组织成树
SysMenu sysMenu = new SysMenu();
sysMenu.setMenuId("");
resultList = this.listToTree(sysMenu, sysMenuList);
// 定义传参
ResultInfo result = new ResultInfo();
result.setData(resultList);
return result;
}
/**
* 构造树形菜单
* @param parmData 父级
* @param list 子级数据
* @return
*/
private List<SysMenuTreeOutVo> listToTree(SysMenu parmData, List<SysMenuTreeOutVo> list) {
List<SysMenuTreeOutVo> childData = new ArrayList<SysMenuTreeOutVo>();
for (SysMenuTreeOutVo data : list) {
if ((parmData.getMenuId() == null && data.getParentId() == null) ||
data.getParentId() != null && data.getParentId().equals(parmData.getMenuId())
) {
childData.add(data);
}
}
List<SysMenuTreeOutVo> resultList = new ArrayList<SysMenuTreeOutVo>();
for (SysMenuTreeOutVo item : childData) {
item.setId(item.getMenuId());
item.setValue(item.getMenuId());
item.setLabel(item.getMenuName());
item.setChildren(this.listToTree(item, list));
resultList.add(item);
}
return resultList;
}
总结
java的树形递归结构基本上是这么实现,主要的内容在于后台给前台数据的整理,只要后台整理成前台需要的json数据,前台自动加载树形结构。后续我会分享更多的技术相关的内容,请大家多多关注。