Laravel自定义Blade组件_封装带有分页的表格组件【操作】

陌瑶小哥_7182

陌瑶小哥_7182

2026-05-08

858人浏览

原创

不能在 Blade 组件内调用 $data->links(),因其依赖请求上下文与 URL 参数逻辑,硬编码会导致模板路径错误、查询参数冲突、职责不清及复用性丧失;分页导航必须由父级视图显式控制。

laravel自定义blade组件_封装带有分页的表格组件【操作】

直接用 包裹分页数据行,但不处理分页导航本身——分页逻辑必须交给外部 $users->links() 或自定义分页视图,组件内硬塞 links() 会破坏复用性、导致路径冲突或类名污染。

为什么不能在 Blade 组件里直接调用 $data->links()

Blade 组件接收的是已分页的集合(如 $users),但它本身不持有请求上下文、不控制 URL 参数拼接逻辑。若在组件内部写 {{ $users->links() }}:

  • 会强制依赖默认分页视图路径(如 resources/views/vendor/pagination/tailwind.blade.php),一旦项目没发布该模板,直接报错 View [pagination::tailwind] not found
  • 无法统一管理查询参数保留逻辑(比如搜索关键词 appends($search)),组件外层已做 appends(),组件内再调一次就重复或冲突
  • 组件失去“只管渲染数据行”的职责边界,变成“又管数据又管分页导航”,后续想换成分页插件或游标分页时,得挨个改组件内部

resources/views/components/table.blade.php 应只负责表格结构

一个干净的表格组件,只接收 $rows、$headers、$emptyText 等纯展示参数,分页导航由父级视图决定位置和样式:

  • 组件内用 @foreach($rows as $row) 渲染 ,不碰 currentPage()、lastPage() 这类分页元数据
  • 空状态用 {{ $emptyText ?? '暂无数据' }},不调用 $rows->isEmpty() —— 因为 $rows 是 LengthAwarePaginator 实例,isEmpty() 返回的是当前页是否为空,不是总数据是否为空
  • 若需显示“共 X 条”,应由父级传入 $total(即 $users->total()),组件不主动调用 total() —— 避免在 simplePaginate 场景下报错(它没有 total() 方法)
  • 示例片段:

    @props(['rows', 'headers', 'emptyText' => '暂无数据', 'total' => null])
    
    
    @foreach($headers as $header) @endforeach @forelse($rows as $row) @foreach($headers as $key => $header) @endforeach @empty @endforelse
    {{ $header }}
    {{ $row[$key] ?? $row->$key ?? '' }}
    {{ $emptyText }}
    @if($total !== null)

    共 {{ $total }} 条

    @endif

    分页导航必须由父级视图显式控制

    真正决定分页怎么渲染、在哪渲染、带哪些参数的,是使用该组件的页面(如 resources/views/users/index.blade.php):

    Laravel Cloud
    Laravel Cloud

    Laravel Cloud(cloud.laravel.com)。此技能用于处理所有 Laravel Cloud 请求,包括搜索和读取数据。只要任务涉及 Laravel Cloud,即使用此技能。

    下载
    • 用 $users->links('pagination.custom') 指向你发布的自定义分页模板,而不是依赖组件内部硬编码
    • 若需保留搜索参数,统一在外层调用 appends(request()->except('page')),不要让组件去猜该 append 什么
    • 动态分页场景(如 tab 切换不同数据源),用 withPath() 显式指定基础路径,避免链接跳转到错误路由
    • 简单列表页可直接放组件下方:{{ $users->links('pagination.custom') }};后台管理页可能需要分页导航在表格上方+下方两处,那就手动写两次

    复杂表格组件建议拆成两个独立组件

    当表格既要支持排序、筛选、导出,又要集成分页导航时,强行塞进一个 会导致维护成本飙升:

    • :只负责渲染 行,接收 $rows 和列定义
    • :只负责渲染分页导航,接收完整分页器实例,内部调用 links() 并处理 appends / withPath
    • 两者通过相同 props 命名约定协作(如都接受 :paginator),但职责彻底分离,未来替换分页方案时只需重写后者
    • 这种拆分不是过度设计——Laravel 自身的 LengthAwarePaginator 和 Paginator 类也是按“有总数”和“无总数”拆开的,组件设计同理。

      最易被忽略的一点:分页组件的 links() 调用,本质是生成 HTML 字符串,它不参与 Laravel 的组件生命周期(比如 mount、update),也不受 $attributes 合并影响。所以别指望给 传个 class="my-paginate" 就能自动加到外层

      上——它输出的是完整
        ,样式覆盖得靠 CSS 选择器,不是靠 Blade 属性透传。

    相关文章

    PHP速学视频免费教程(入门到精通)
    PHP速学视频免费教程(入门到精通)

    PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    laravel

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    laravel组件介绍
    laravel组件介绍

    laravel 提供了丰富的组件,包括身份验证、模板引擎、缓存、命令行工具、数据库交互、对象关系映射器、事件处理、文件操作、电子邮件发送、队列管理和数据验证。想了解更多laravel的相关内容,可以阅读本专题下面的文章。

    2024.04.09

    897

    10

    laravel中间件介绍
    laravel中间件介绍

    laravel 中间件分为五种类型:全局、路由、组、终止和自定。想了解更多laravel中间件的相关内容,可以阅读本专题下面的文章。

    2024.04.09

    875

    9

    laravel使用的设计模式有哪些
    laravel使用的设计模式有哪些

    laravel使用的设计模式有:1、单例模式;2、工厂方法模式;3、建造者模式;4、适配器模式;5、装饰器模式;6、策略模式;7、观察者模式。想了解更多laravel的相关内容,可以阅读本专题下面的文章。

    2024.04.09

    2528

    10

    thinkphp和laravel哪个简单
    thinkphp和laravel哪个简单

    对于初学者来说,laravel 的入门门槛较低,更易上手,原因包括:1. 更简单的安装和配置;2. 丰富的文档和社区支持;3. 简洁易懂的语法和 api;4. 平缓的学习曲线。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    2024.04.10

    4981

    7

    laravel入门教程
    laravel入门教程

    本专题整合了laravel入门教程,想了解更多详细内容,请阅读专题下面的文章。

    2025.08.05

    7310

    22

    laravel实战教程
    laravel实战教程

    本专题整合了laravel实战教程,阅读专题下面的文章了解更多详细内容。

    2025.08.05

    4796

    13

    laravel面试题
    laravel面试题

    本专题整合了laravel面试题相关内容,阅读专题下面的文章了解更多详细内容。

    2025.08.05

    8989

    7

    PHP高性能API设计与Laravel服务架构实践
    PHP高性能API设计与Laravel服务架构实践

    本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

    2026.03.04

    1536

    29

    Laravel 框架安装指南
    Laravel 框架安装指南

    本指南详解 Laravel 框架安装全流程,涵盖 PHP 8.1+ 环境配置、Composer 依赖管理工具安装及国内镜像源优化。重点演示使用 composer create-project 命令创建 Laravel 10/11 项目,解决常见安装错误与依赖冲突。从环境搭建到项目初始化,助您快速完成 Laravel 开发环境部署,为后续 Web 应用开发奠定基础。适合 PHP 初学者与框架迁移开发者参考。

    2026.04.09

    215

    6

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    如何安装 Composer
    如何安装 Composer

    共1课时 | 225人学习

    Composer手册
    Composer手册

    共0课时 | 0人学习