laravel根据数据动态生成表头和表格数据-蒲公英云

laravel根据数据动态生成表头和表格数据

需求：根据数据动态配置表头，动态适配表头数据
如下图，两个表的表头和数据一一对应，都为动态生成；
完成功能思想：1.找出数据中的存在的最长表头，即所有数据都为表头的子集表头
2.渲染数据时候，根据表头的字段进行帅选要显示的数据（用循环判断实现）
在这里插入图片描述

在这里插入图片描述

后端配置数据：

public function show($productid)
    {
        $products = Product::orderBy('created_at', 'desc')->get(); //发送给前端
        $versions = Versionindex::where('product_id', $productid)->with('versiondetail', 'versionatt')->get();
        $version_ids = $versions->pluck('id');
        $version_types = VersionGroup::where('product_id', $productid)->get();//模板配置表头
        $att_keys = VersionAttache::whereIn('versionindex_id', $version_ids)->groupBy('key')->get();//自定义配置表头
        return view('admin.hwtc.vers.show', compact('products', 'productid', 'version_types', 'att_keys', 'versions'));
    }

前端数据帅选：

<table class="layui-table">
                            <thead>
                            <tr>
                                <th>序号</th>
                                @foreach($version_types as $type)
                                    <th>{
   {$type->version_name}}</th>
                                @endforeach
                                @foreach($att_keys as $key)
                                    <th>{
   {$key->key}}</th>
                                @endforeach
                                <th>创建者</th>
                                <th>创建时间</th>
                                <th>是否启用</th>
                                <th>是否冻结</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($versions as $k=>$item)
                                <tr data-id="{
   {$item->id}}">
                                    <td>{
   {$k+1}}</td>
                                    @foreach($version_types as $type)
                                        @foreach($item->versiondetail as $detail)
                                            @if($detail->version_type == $type->version_type)
                                                <td>{
   {@$detail->version_value}}</td>
                                            @endif
                                        @endforeach
                                    @endforeach
                                    @foreach($att_keys as $key)
                                        @foreach(@$item->versionatt as $att)
                                            @if($att->key == $key->key)
                                                <td>{
   {@$att->value}}</td>
                                            @endif
                                        @endforeach
                                        @if(@$item->versionatt->pluck('key')->contains($key->key))
                                        @else
                                            <td></td>
                                        @endif
                                    @endforeach
                                    <td>{
   {$item->created_by}}</td>
                                    <td>{
   {$item->created_at}}</td>
                                    <td>{!! is_status($item->enabled,'enabled') !!}</td>
                                    <td>@if($item->freezed == 1)<i class="layui-icon is_something" data-attr="freezed"></i> @elseif($item->freezed == 0)
                                            <i class="layui-icon is_something" data-attr="freezed">ဆ</i> @endif
                                    </td>
                                    <td class="td-manage">
                                        <a lay-tips="编辑版本"
                                           onclick="WeAdminShow('编辑版本','{
   {route('hwtc.versionindex.edit',$item->id)}}')"
                                           href="javascript:;">
                                            <i class="layui-icon"></i>
                                        </a> 
                                        <a lay-tips="删除版本" href="{
   {route('hwtc.versionindex.destroy', $item->id)}}"
                                           data-method="delete"
                                           data-token="{
   {csrf_token()}}" data-confirm="确认删除吗?"
                                           class="btn btn-white btn-xs" lay-event="del"><i
                                                    class="layui-icon"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>