Laravel8.x无限级分类怎么递归渲染前端树形菜单-php教程-PHP中文网

Laravel 8.x 实现无限级分类树形菜单需后端嵌套数据+前端递归渲染：模型设 nullable parent_id 并定义 children 关系，控制器用 with 预加载；Blade 中通过 @include 递归渲染 _node 模板，配合 CSS 缩进与可选 JS 交互。

laravel8.x无限级分类怎么递归渲染前端树形菜单

在 Laravel 8.x 中实现无限级分类的前端树形菜单，核心是「后端提供结构化嵌套数据 + 前端递归渲染」。不依赖第三方包也能高效完成，关键是数据组织方式和 Blade 模板的递归写法要匹配。

后端：用 Eloquent 预加载构建嵌套树

确保分类模型中定义好父子关系：

迁移字段必须允许 null：`$table->foreignId('parent_id')->nullable()->constrained()->nullOnDelete();`（不能设 default(0) 或 unsigned 且非空）

模型中声明关系：

public function children()
{
    return $this->hasMany(Category::class, 'parent_id');
}
<p>// 用于一次性加载整棵树（含所有后代）
public function descendantsAndSelf()
{
return $this->children()->with('descendantsAndSelf');
}</p>

控制器中获取根节点并预加载全树：
```
$categories = Category::whereNull('parent_id')
    ->with(['children' => fn($q) => $q->with('children')])
    ->get();
```
注意：Laravel 8.x 的 `with()` 支持闭包嵌套，最多展开两层已够多数场景；若需真正无限深度，可改用递归集合处理（见下文补充）。

前端：Blade 中用 @include 实现递归模板

在 resources/views/categories/index.blade.php 中写主入口：

再新建 resources/views/categories/_node.blade.php（关键递归文件）：

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

@if($node->children->isNotEmpty())

@foreach($node->children as $child) @include('categories._node', ['node' => $child]) @endforeach @endif

这样就完成了无 JS、零依赖的纯服务端递归渲染。样式可通过 CSS 控制缩进（如 padding-left: calc({{ $depth ?? 0 }} * 24px)，需在 include 时传入 depth 参数）。