1

我正在开发一个有很多表格的系统，所以我必须在所有显示表格的文件上重复写入表格标签这是我对每个必须显示表格的文件所做的事情

在国家表上：

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

实现这一目标的最佳方法是什么

4

1 回答 1

2

您可以为此使用 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"/>
于 2020-04-02T20:16:59.503 回答