Vuetify: строка таблицы v-данных развернуть таблицу v-данных - PullRequest
Новая
       33

Vuetify: строка таблицы v-данных развернуть таблицу v-данных

0 голосов
/ 05 августа 2020

Я использую таблицу v-данных, и для каждой строки я создаю таблицу v-данных, связанную с этой строкой ... Итак, у меня две проблемы: во-первых, когда я получаю данные (элементы) с помощью ax ios запрос, для каждой строки у меня есть дублированная таблица v-данных, потому что у меня нет соответствующих элементов каждой таблицы v-данных каждой строки.

Во-вторых, у меня есть элементы отображения-выбора в таблицах данных, поэтому, когда я выбираю строку, должна быть выбрана каждая строка вложенной таблицы v-данных. Как мне это сделать? (возможно, с тестированием v-моделей, но где следует проводить тест?)

ШАБЛОН: 

     <v-data-table
        v-model="selection"
        :headers="headers"
        :items="questionnaires"
        :single-expand="singleExpand"
        :expanded.sync="expanded"
        item-key="id"
        show-expand
        show-select
        :single-select="singleSelectQuestionnaire"
        class="elevation-1"
    >
        <template v-slot:top>
            <v-toolbar flat>
                <v-toolbar-title> title :</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-switch v-model="singleExpand" label="Single expand" class="mt-2"></v-switch>
            </v-toolbar>
        </template>
        <template v-slot:expanded-item="{ headers, item}">
            
            <td :colspan="headers.length" :key="item.id"> 
                <v-data-table
                    v-model="selectedQuestion"
                    :headers="headersQuestions"
                    :items="questionnaire_questions"
                    item-key="id"
                    hide-default-footer
                    show-select
                    :single-select="singleSelectQuestion"
                    class="elevation-1"
                >
                   
                </v-data-table>
            </td>
        </template>
    </v-data-table>

    <v-btn
        class="white--text"
        color="green darken-1"
        depressed
        @click="saveSelectedQuestionnaire"
    >
        Enregistrer
        <v-icon right>mdi-content-save</v-icon>
    </v-btn>```

JS МЕТОДЫ: 

        getQuestionnaire() {
        axios
            .get(
                `api/questionnaires/${this.$route.params.logiciel_id}`
            )
            .then((response) => {
                this.questionnaires = response.data.data;
                this.getQuestions();
            })
            .catch(function (err) {});
    },
    getQuestions() {
        axios
            .get("/api/questions/")
            .then((res) => {
                this.questionnaire_questions = res.data.data || [];
            })
            .catch(function (err) {
                console.log("erreur lors du chargement des questions", err);
            });
    },
...