TP6.0 的模型获取器,说实话,很多人对它的理解还停留在“转状态文字”这个层面。其实它有个更实用的场景:在数据从模型里出来的时候,就把前端树形组件需要的那些字段“提前准备好”。这样一来,Vue 或 React 的 Tree 组件(比如 Element Plus 的 el-tree 或 Ant Design 的 Tree)拿到数据直接就能用,省去了前端反复映射、拼接、递归转换的麻烦。

TP6.0 巧用模型获取器格式化前端树形控件数据【Vue/React】

用获取器统一处理树节点显示字段

树形控件通常要求数据有 labelvaluechildren 这类固定字段。但问题来了,数据库里存的可能是 nameidpid。与其在控制器里手动写个 foreach 去改键名,不如在模型里用获取器把这些“契约字段”定义好:

这样查出来的每个模型实例,天然就自带 labelvaluedisabled 这些属性。前端直接绑定就行,再也不用写一层 map 转换逻辑了。

用 append 动态注入 children 关系

TP6 默认查出来的是扁平数组(比如所有菜单项),但树组件需要的是嵌套结构。这里有个常见的误区:很多人直接在 PHP 层做递归组装,其实大可不必——那是后端过度干预前端渲染逻辑。更轻量的做法是:

不过得注意,这种方式适合层级浅、数据量不大的菜单或分类场景。如果数据量一大,还是建议后端直接返回已经组装好的树形 JSON,避免 N+1 查询带来的性能问题。

配合 visible / hidden 控制输出字段

前端树组件往往只需要几个字段,多余字段传过去纯属浪费带宽。TP6 的 visiblehidden 方法正好能派上用场:

尤其是在返回整个菜单树时(比如 Menu::tree()->toArray()),配合获取器加上 visible,输出的就是一份开箱即用的前端树数据,结构干净、语义清晰、没有冗余。

前后端约定好字段,避免运行时判断

很多项目里,前端要写一堆 node.label || node.name || node.title 这样的兼容逻辑。根源在于后端没统一字段出口。TP6 的获取器正好可以成为这个“约定枢纽”:

这种设计让前后端边界更清晰,也方便未来切换不同 UI 库(从 Element 切到 Arco、Naive),只要数据结构不变,树组件就能复用。

本文转载于:https://www.php.cn/faq/2817480.html 如有侵犯,请联系zhengruancom@outlook.com删除。
免责声明:正软商城发布此文仅为传递信息,不代表正软商城认同其观点或证实其描述。