时间戳

首页 > 解决方案 > 在一个表格刀片组件中显示 2 个数组

php - 在一个表格刀片组件中显示 2 个数组

问题描述

此代码有效：

<table class="rounded-t-lg m-5 w-5/6 mx-auto bg-gray-200 text-gray-800">
<thead class="text-left border-b-2 border-gray-300">
<th class="px-4 py-3">#</th>
<th class="px-4 py-3">Tipo Doc.</th>
<th class="px-4 py-3">Documento</th>
<th class="px-4 py-3">Nombre</th>
<th class="px-4 py-3">Teléfono</th>
<th class="px-4 py-3">Correo</th>
<th class="px-4 py-3">Fecha</th>
<th class="px-4 py-3">Acciones</th>
</thead>
<tbody>
@if (count($pacientes)>0)
    @foreach($pacientes as $paciente)
        <tr class="bg-gray-100 border-b border-gray-200">
            <td class="px-4 py-3">{{$paciente->id}}</td>
            <td class="px-4 py-3">{{$paciente->tipoIdentificacion}}</td>
            <td class="px-4 py-3">{{$paciente->Identificacion}}</td>
            <td class="px-4 py-3">{{$paciente->NombreCompleto}}</td>
            <td class="px-4 py-3">{{$paciente->Telefono}}</td>
            <td class="px-4 py-3">{{$paciente->Correo}}</td>
            <td class="px-4 py-3">{{$paciente->created_at}}</td>
            <td>
                <a href="{{ url('/pacientes/' . $paciente->id . '/edit') }}">
                    Editar
                </a>
                <form action="{{ url('/pacientes/' . $paciente->id) }}" method="post">
                    @csrf
                    {{ method_field('DELETE') }}
                    <input type="submit" value="Borrar">
                </form>
            </td>
        </tr>
    @endforeach
@endif
</tbody>

但是这个表是不可重复使用的。为了让它作为一个组件工作，它必须使用任意数量的标题和数据，在每一行的末尾都有一个操作按钮（编辑或删除）。我已将titles(th) 保存在一个数组中，并且它们使用 a 正确显示foreach，但我无法按顺序用其他数据填充表格。你能帮我么？

标签： phplaravelhtml-tablelaravel-8

解决方案

你可以使用 Laravel 的Components。

组件和插槽提供与部分、布局和包含类似的好处；但是，有些人可能会发现组件和插槽的心智模型更容易理解。编写组件有两种方法：基于类的组件和匿名组件。

我将在这里使用基于类的组件。

步骤1

make:component使用Artisan 命令创建基于类的组件。以下：

php artisan make:component TableLayout

此命令将创建两个文件及其关联的脚手架目录。App\View\Components\TableLayout.php这resources\views\components\table-layout.blade.php是部分视图。

下面是TableLayout组件。

您应该在其类构造函数中定义组件所需的数据。组件上的所有公共属性将自动对组件的视图可用。不必从组件的render方法将数据传递给视图：

<?php
// App\View\Components\TableLayout.php

namespace App\View\Components;

use Illuminate\View\Component;

class TableLayout extends Component
{
    public $dataObject;
    public $dataObjectIdLabel;
    public $routeUrl;
    public $thsTds;
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($dataObject, $dataObjectIdLabel, $routeUrl, $thsTds )
    {
        $this->dataObject = $dataObject;
        $this->dataObjectIdLabel = $dataObjectIdLabel;
        $this->routeUrl = $routeUrl;
        $this->thsTds = $thsTds;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.table-layout');
    }
}

下面是对应的table-layout视图。

渲染组件时，您可以通过按名称回显变量来显示组件的公共变量的内容：


 <!-- resources\views\components\table-layout.blade.php -->

<table class="rounded-t-lg m-5 w-5/6 mx-auto bg-gray-200 text-gray-800">

    <thead class="text-left border-b-2 border-gray-300">
    @foreach(array_keys($thsTds) as $th)
    <th class="px-4 py-3">{{$th}}</th>
    @endforeach
    <th class="px-4 py-3">Acciones</th>
    </thead>

    <tbody>
    @if (count($dataObject)>0)
    @foreach($dataObject as $data)
        <tr class="bg-gray-100 border-b border-gray-200">
        @foreach(array_values($thsTds) as $td)
            <td class="px-4 py-3">{{$data->$td}}</td>
        @endforeach
        <td>
            <a href="{{ url($routeUrl . $data->$dataObjectIdLabel . '/edit') }}">
            Editar
            </a>
            <form action="{{ url($routeUrl . $data->$dataObjectIdLabel) }}" method="post">
            @csrf
            {{ method_field('DELETE') }}
            <input type="submit" value="Borrar">
            </form>
        </td>
        </tr>
    @endforeach
    @endif
    </tbody>

</table>

第2步

然后在任何其他“刀片视图”文件/模板中，即resources\views\example.blade.php使用新创建的可重用组件。

渲染组件

要显示组件，您可以在其中一个 Blade 模板中使用 Blade 组件标签。Blade 组件标签以字符串x-开头，后跟组件类的 kebab 案例名称：

<!-- resources\views\example.blade.php -->

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
    </head>
    <body>

    @php ($thsTds = [
    "#"=> "id",
    "Tipo Doc."=>"tipoIdentificacion",
    "Documento"=>"Identificacion",
    "Nombre"=>"NombreCompleto",
    "Teléfono"=>"Telefono",
    "Correo"=>"Correo",
    "Fecha"=>"created_at"
    ])
    
    <x-table-layout :data-object="$paciente" data-object-id-label="id" route-url="/pacientes/" :ths-tds="$thsTds" />

    </body>
</html>

笔记

将数据传递给组件

您可以使用 HTML 属性将数据传递给 Blade 组件。可以使用简单的 HTML 属性字符串将硬编码的原始值传递给组件。PHP 表达式和变量应该通过使用:字符作为前缀的属性传递给组件：

套管

组件构造函数参数应使用camelCase, whilekebab-case在 HTML 属性中引用参数名称时使用。

推荐阅读