[英]Display 2 arrays in a table blade component
此代码有效:
<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>
但是这个表是不可重复使用的。 为了让它作为一个组件工作,它必须使用任意数量的标题和数据,在每一行的末尾都有一个操作按钮(编辑或删除)。 我已经将标题(th)保存在一个数组中,并且它们使用foreach
正确显示,但我无法按顺序用其他数据填充表格。 你能帮我么?
你可以使用 Laravel 的Components 。
组件和插槽提供与部分、布局和包含类似的好处; 但是,有些人可能会发现组件和插槽的心理 model 更容易理解。 编写组件有两种方法:基于 class 的组件和匿名组件。
我将在这里使用基于 class 的组件。
步骤1
使用make:component
Artisan 命令创建一个基于 class 的组件。 以下:
php artisan make:component TableLayout
此命令将创建两个文件及其关联的脚手架目录。 App\View\Components\TableLayout.php
和resources\views\components\table-layout.blade.php
是部分视图。
下面是TableLayout
组件。
您应该在其 class 构造函数中定义组件所需的数据。 组件上的所有公共属性将自动对组件的视图可用。 不必从组件的
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-
开头,后跟组件 class 的 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 属性将数据传递给刀片组件。 可以使用简单的 HTML 属性字符串将硬编码的原始值传递给组件。 PHP 表达式和变量应通过使用
:
字符作为前缀的属性传递给组件:
组件构造函数 arguments 应使用
camelCase
指定,而在 HTML 属性中引用参数名称时应使用 kebabkebab-case
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.