laravel - 如何创建模板视图表标签而不在每个文件上重复表标签
问题描述
我正在开发一个有很多表格的系统,所以我必须在所有显示表格的文件上重复写入表格标签这是我对每个必须显示表格的文件所做的事情
在国家表上:
<table class="table table-striped table-hover table-sm" id="table">
<thead class="text-uppercase text-center bg-primary">
<tr class="text-white">
<th scope="col">Name</th>
<th scope="col">Slug</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
<th scope="col">Cities</th>
<th scope="col">Descriptions</th>
<th scope="col" >Actions</th>
</tr>
{{ csrf_field() }}
</thead>
<tbody>
@foreach ($countries as $country)
<tr>
<td class="text-left">{{$country->name}}</td>
<td class="text-center">{{$country->slug}}</td>
<td class="text-right">{{$country->population}}</td>
<td class="text-center">{{$country->region->name}}</td>
<td class="text-center">{{$country->city_count}}</td>
<td class="text-left">{{$country->desc}}</td>
<td class="text-center">
<div class="btn-group">
@can('country-update')
<a class="btn btn-primary btn-sm mr-2" href="{{route('location.countries.edit',$country)}}" title="Edit"><i class="fa fa-edit"></i></a>
@endcan
@can('country-delete')
<form class="form-delete" method="post" action="{{route('location.countries.destroy',$country)}}">
@method('DELETE')
@csrf
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')"><i class="fa fa-trash-alt"></i></button>
</form>
@endcan
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
然后在城市我会做同样的事情,但使用不同的表头名称和表数据
<table class="table table-striped table-hover table-sm" id="table">
<thead class="text-uppercase text-center bg-primary">
<tr class="text-white">
<th scope="col">Name</th>
<th scope="col">Slug</th>
<th scope="col">Country</th>
<th scope="col">Descriptions</th>
<th scope="col" >Actions</th>
</tr>
{{ csrf_field() }}
</thead>
<tbody>
@foreach ($cities as $city)
<tr>
<td class="text-left">{{$city->name}}</td>
<td>{{$city->slug}}</td>
<td class="text-center">{{$city->country->name}}</td>
<td class="text-left">{{$city->desc}}</td>
<td class="text-center">
<div class="btn-group">
@can('city-update')
<a class="btn btn-primary btn-sm mr-3" href="{{route('location.cities.edit',$city)}}" title="Edit"><i class="fa fa-edit"></i></a>
@endcan
@can('city-delete')
<form class="form-delete" method="post" action="{{route('location.cities.destroy',$city)}}">
@method('DELETE')
@csrf
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')" title="delete"><i class="fa fa-trash-alt"></i></button>
</form>
@endcan
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
但我希望有一个模板,我只会填充表头行和表体,如下所示
<div class="table-responsive">
<table class="table table-striped table-hover table-sm" id="table">
<thead class="text-uppercase text-center">
<tr>
//Dynamic table heads
@if(!is_null($rows))
@foreach($rows as $row)
{{$row}}
@endforeach
@endif
</tr>
</thead>
<body>
//Dynamic table body
@if(!is_null($datas))
@foreach($datas as $data)
{{$data}}
@endforeach
@endif
</tbody>
</table>
<!-- end table -->
</div>
实现这一目标的最佳方法是什么
解决方案
您可以为此使用 Blade 组件。Laravel 7 中的一种方法是使用 Blade 类组件。链接到官方 Blade 组件文档:https ://laravel.com/docs/7.x/blade#components
您可以使用 artisan 命令创建通用表格组件:
php artisan make:component Table
组件类
您的组件可能如下所示:
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Table extends Component
{
/**
* Array of table heading strings
*
* @var array
*/
public $headings;
/**
* Table rows
*
* @var array
*/
public $rows;
/**
* Create the component instance.
*
* @param string $type
* @param string $message
* @return void
*/
public function __construct($headings, $rows)
{
$this->headings = $headings;
$this->rows = $rows;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|string
*/
public function render()
{
return view('components.table');
}
}
组件视图
现在,当您拥有组件类时,您必须准备组件视图。您将在 /resources/views/components/table.blade.php 中找到它。
<div class="table-responsive">
<table class="table table-striped table-hover table-sm" id="table">
//Dynamic table heads
@if($headings)
<thead class="text-uppercase text-center">
<tr>
@if($rows))
@foreach($rows as $row)
<th>{{$row}}</th>
@endforeach
@endif
</tr>
</thead>
@endif
<tbody>
//Dynamic table body
@foreach($rows as $row)
<tr>
// Render each item from row
@foreach($row as $item)
<td>{{$item}}</td>
@endforeach
</tr>
@endif
</tbody>
</table>
<!-- end table -->
</div>
现在您可以在视图中使用您的组件:
<x-table :headings="['foo', 'bar']"
:data="[['foo1', 'bar1'], ['foo2', 'bar2']]" class="mt-4"/>
推荐阅读
- javascript - 如何在 JavaScript 中使用正则表达式“测试”
- python - Sonarqube 如何使用 # NOSONAR 在 Python 中抑制特定警告
- javascript - 使反应 redux 连接到反应钩子(道具 TypeError 问题)
- java - RSA 私钥无效:密钥库操作失败
- reactjs - 您如何调试浅渲染酶测试?
- f# - F# 参数化插入 Sql
- ios - 应用程序试图在 React Native Objective-C 扩展中的目标上呈现一个 nil 模态视图控制器
- reactjs - 使用 axios 的 API 请求结果在我的 React Native 代码中返回 undefined 但在控制台中正确记录
- scala - 如何查找并填充第三高金额并将相同的第三高金额填充到新列(Cut_of_3)
- mysql - SQL 查询优化 - 来自另一个表的多行