Блог

Я довольно новичок Vue.js и пытаюсь создать отчет с использованием Laravel, Vuetify и таблиц данных. В прошлом мне удавалось создавать обычный (построчный) отчет с помощью этих инструментов, однако теперь мне нужно создать отчет с вложенными таблицами (что-то вроде показано ниже).:

A Site содержит несколько Services . A Service содержит несколько Clients , а a Client содержит несколько Appointments . Мне действительно нужна возможность поддерживать расширенные функции компонента Vuetify datatables, который включает поиск, сортировку и фильтрацию, Разбиение на страницы и т.д.

До сих пор у меня есть следующий код (который работает неправильно из-за проблем с форматированием):

 ...
<v-card
    flat>
    <v-card-title>
        <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="Search"
            single-line
            hide-details>
        </v-text-field>
    </v-card-title>
    <v-data-table
        :loading="loading"
        loading-text="Loading... Please wait"
        :headers="headers"
        :items="reportItems"
        :search="search"
        :items-per-page="25"
        :footer-props="{
            'items-per-page-options':[25, 50, 100, -1]
        }">

        <template v-slot:item="{ item }">
            <tr>
                <td>{{ item.Site }}</td>
                <td>
                    <table>
                        <tr v-for="service in item.Services">
                            <td>{{ service.Name }}</td>
                            <td>
                                <table>
                                    <tr v-for="client in service.Clients">
                                        <td>{{ client.Name }}</td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table>
                                    <tr v-for="appointment in client.Appointments">
                                        <td>{{ appointment.Name }}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </template>
    </v-data-table>
</v-card>
...


...
export default {

    data: function() {
        return {
            headers: [
                { text: 'SITE', align: 'start' },
                { text: 'SERVICE' },
                { text: 'CLIENT' },
                { text: 'APPOINTMENT' },
                { text: 'START', align: 'center' },
                { text: 'END', align: 'center' },
            ],
            reportItems: [],
            loading: true
        }
    },
...