如何在不在每个文件上重复 table 标签的情况下创建模板视图 table 标签

Question

我正在开发一个有很多 table 的系统，所以我必须在所有显示 table 的文件上重复编写 table 标签这是我在每个必须显示 table

的文件上所做的

关于国家 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">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 头名和 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>

但我想要一个模板，我只填充 table 标题行和 table body 像这样的东西

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

完成此任务的最佳方法是什么

Answer 1

您可以为此使用 Blade 组件。 Laravel 7 中的一种方法是使用 Blade class 组件。 Link 官方 Blade 组件文档：https://laravel.com/docs/7.x/blade#components

您可以使用 artisan 命令创建通用 table 组件：

php artisan make:component Table

组件class

您的组件可能如下所示：

<?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');
    }
}

组件视图

现在，当您拥有组件 class 时，您必须准备组件视图。您会在 /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"/>

如何在不在每个文件上重复 table 标签的情况下创建模板视图 table 标签

How to create a template view table tag without repeating table tags on every file

laravel

laravel-views

laravel-6

laravel-7

组件class

组件视图