时间戳

首页 > 解决方案 > Laravel Blade 使用 VueJS 在表格内渲染表格

laravel - Laravel Blade 使用 VueJS 在表格内渲染表格

问题描述

我有这种使用 Laravel 刀片视图的场景：

@foreach($event->drawingrequests as $drawing)
<tr>
    <td>{{ $drawing->field1 }}</td>
    <td>{{ $drawing->field2 }}</td>
    <td>{{ $drawing->field3 }}</td>
    <td>{{ $drawing->field4 }}</td>
    <td>{{ $drawing->field5 }}</td>
    <td>{{ $drawing->field6 }}</td>
    <td>{{ $drawing->field7 }}</td>
</tr>
    @if(count(drawing->childs) > 0)
        <tr><td colspan="7">
                <table class="table">
                    <tbody>
                    @foreach(drawing->childs as $stage)
                        <tr>
                            <td>{{ $stage->field1 }}</td>
                            <td>{{ $stage->field2 }}</td>
                            <td>{{ $stage->field3 }}</td>
                            <td>{{ $stage->field4 }}</td>
                            <td>{{ $stage->field5 }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </td></tr>
    @endif
@endforeach

我可以在 VueJS 上做吗？？？这里的主要问题是，在 VueJs 上，条件始终连接到 DOM 元素。当 childs > 0 时，我需要创建其他 tr。而且我需要在每张图纸上检查这个条件。

<tr v-for="drawing in eventdetail.event.drawingrequests">
    <td>@{{ drawing.field1 }}</td>
    <td>@{{ drawing.field2 }}</td>
    <td>@{{ drawing.field3 }}</td>
    <td>@{{ drawing.field4 }}</td>
    <td>@{{ drawing.field5 }}</td>
    <td>@{{ drawing.field6 }}</td>
    <td>@{{ drawing.field7 }}</td>
</tr>
@if(drawing.childs > 0)
    <tr>
        <td colspan="7">
            <table class="table">
                <tbody>
                <tr v-for="stage in drawing.childs">
                    <td>@{{ stage.field1 }}</td>
                    <td>@{{ stage.field2 }}</td>
                    <td>@{{ stage.field3 }}</td>
                    <td>@{{ stage.field4 }}</td>
                    <td>@{{ stage.field5 }}</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
@endif

标签： laravelvue.jshtml-tablelaravel-bladev-for

解决方案

找到了解决方案：

<template v-for="drawing in eventdetail.event.drawingrequests">
    <tr>
        <td>@{{ drawing.field1 }}</td>
        <td>@{{ drawing.field2 }}</td>
        <td>@{{ drawing.field3 }}</td>
        <td>@{{ drawing.field4 }}</td>
        <td>@{{ drawing.field5 }}</td>
        <td>@{{ drawing.field6 }}</td>
        <td>@{{ drawing.field7 }}</td>
    </tr>
    <tr v-if="drawing.childs > 0">
        <td colspan="7">
            <table class="table">
                <tbody>
                <tr v-for="stage in drawing.childs">
                    <td>@{{ stage.field1 }}</td>
                    <td>@{{ stage.field2 }}</td>
                    <td>@{{ stage.field3 }}</td>
                    <td>@{{ stage.field4 }}</td>
                    <td>@{{ stage.field5 }}</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
</template>

参考链接： Vue：在表格中显示嵌套数据

推荐阅读