筛选树形菜单时关联其父节点和子节点
发布网友
发布时间：2024-08-19 17:22
共1个回答
热心网友
时间：2024-08-22 15:34
在很多系统管理/菜单管理中经常会出现这样的树形菜单，它通常是通过前端的Tree组件来渲染的。
后端返回的树形结构数据如下所示。
在已有的Element、ant-vue等前端框架中这种组件都是有的，使用起来非常简单。
Ant Design Vue
问题
目前的需求是，如上图菜单搜索有两个条件，状态和菜单名称。在查询菜单时，需要通过模糊匹配菜单名称和精确匹配菜单状态来查询。这个本身很简单，但是问题在于树形菜单搜索时需要带上父菜单和子菜单，而不是只展示匹配到的菜单。
如：搜索“用户”时应该有下面的结果，在查询到相关节点后同时带上父节点和子节点返回。
Ant Design Vue在这里前端组件是有这样的实现的，如下。
前端是有这样的实现，而且很简单，那么有没有后端的实现方案呢？
如何实现
最直接的思路就是查询满足条件的菜单，然后去查这些菜单的父菜单和子菜单。虽然讲起来很容易，但是这里要注意重复节点和死循环的问题。
重复节点问题：同级菜单具有相同的父节点。在查完第一个子节点的父节点后，将父节点收集起来，查第二就没有必要了，这样可以省去。
死循环：查子节点时不要再去查其父节点的子节点和父节点，否则可能会出现死循环。
下面贴上了所有代码仅供参考。
查询菜单列表
查询菜单的父/子菜单
递归查找当前菜单的所有父菜单
递归查找当前菜单的所有子菜单
构建菜单树
基于以上后端查询树形菜单的代码就可以实现“筛选树形菜单时关联其父节点和子节点”了，效果还是可以的。
写在最后
拙作艰辛，字句心血，望诸君垂青，多予支持，不胜感激。
