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

Question

此代码正在运行：

<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) 保存在一个数组中，并且它们使用foreach 正确显示，但我无法按顺序用其他数据填充表格。你能帮帮我吗？

Answer 1

你可以使用 Laravel 的Components。

组件和插槽提供与部分、布局、 并包括；然而，有些人可能会发现组件的心理模型 和插槽更容易理解。有两种写法 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 步

然后在任何其他 'blade view' 文件/模板（即 resources\views\example.blade.php）中，使用新创建的可重用组件。

Rendering Components

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

<!-- 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>

注意事项

Passing Data To Components

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

Casing

组件构造函数参数应该使用camelCase指定， 而kebab-case 应该在引用时使用 HTML 属性中的参数名称。