web-dev-qa-db-fra.com

Vuetify Comment ouvrir et fermer des boîtes de dialogue dans une table de données

Nous avons créé une application pour une entreprise de recrutement où l'administrateur peut afficher les utilisateurs dans un tableau de données Vuetify. Dans ce tableau, nous voulons afficher les notes utilisateur, mais elles sont parfois longues et ne s'intègrent pas bien dans une cellule de tableau. Nous souhaitons simplement cliquer sur un bouton et ouvrir les notes dans une boîte de dialogue.

Le problème est que si nous avons 200 utilisateurs et que nous cliquons sur le bouton pour ouvrir "dialogNotes", chaque boîte de dialogue utilisateur s'ouvre. Comment pouvons-nous ajuster notre code pour que seule la boîte de dialogue de cet utilisateur s'ouvre?

<template slot="items" slot-scope="props">
                <td>
                <v-checkbox
                  primary
                  hide-details
                  v-model="props.selected"
                ></v-checkbox>
              </td>
                <td>{{props.item.status}}</td>
                <td>
          <img v-if="props.item.photoUrl" :src="props.item.photoUrl" class="user-img">
          <img v-if="!props.item.photoUrl" src="/static/avatar.png" class="user-img">
        </td>
                <td>
                <router-link v-if="props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.name }}</router-link>
        <router-link v-if="!props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.id }}</router-link>
                </td>
                <td>
                <v-btn icon color="primary" small @click.stop="dialogNote = true"><v-icon small>open_in_new</v-icon></v-btn>
                    <v-dialog v-model="dialogNote" scrollable lazy max-width="500" :key="props.item.id">
                    <v-card>
                      <v-card-title>
                        <span>{{ props.item.name }} Note</span>
                      </v-card-title>
                      <v-card-text>
                        {{props.item.note}}
                      </v-card-text>
                      <v-card-actions>
                        <v-btn color="primary" flat @click.stop="dialogNote=false">Close</v-btn>
                      </v-card-actions>
                    </v-card>
                  </v-dialog>
                </td>
                <td>{{props.item.greek}}</td>
                <td>
                <span v-if="props.item.tipsUrl">Yes</span>
              </td>
                <td>{{props.item.waiver}}</td>
                <td>{{props.item.media}}</td>
              <td>{{ props.item.howHear }}</td>
            </template>

les données:

dialogNote: false,
javascriptvue.jsdialogvuetify.js
6
Greg Fielding

À mon avis, c'est une façon meilleure et plus propre d'utiliser vuetify pour le tableau de données et la boîte de dialogue.

Dans les exemples ci-dessous également, la boîte de dialogue s'ouvre pour chaque utilisateur lorsque vous souhaitez les modifier.

Vuetify propose un tableau de données Actions CRUD et vous pouvez modifier, supprimer et ajouter un nouvel élément. Pour en savoir plus regardez ici

0
roli roli