Je souhaite appeler la fonction editItem lorsque l'utilisateur clique sur la ligne du tableau. Actuellement, je clique sur la ligne du tableau et elle n'affiche pas la page de détails. Pourtant, lorsque je mets cet événement de clic sur des données de table particulières, la fonction editItem est appelée. Comment puis-je faire appel à cette même fonction sur la ligne de la table elle-même?
Ici, dans mon code, j'ai essayé d'utiliser le modèle et l'emplacement de v-data-table et j'ai inclus l'événement de clic sur la ligne mais cela ne fonctionne pas non plus
<template slot="items" slot-scope="props">
<tr @click="editItem(item), selected = item.id">
<td>{{ props.item.member }}</td>
<td>{{ props.item[1] }}</td>
<td>{{ props.item[2] }}</td>
<td>{{ props.item[3] }}</td>
<td>{{ props.item[4] }}</td>
<td>{{ props.item[5] }}</td>
<td>{{ props.item[6] }}</td>
<td>{{ props.item[7] }}</td>
<td>{{ props.item[8] }}</td>
<td>{{ props.item[9] }}</td>
<td>{{ props.item[10] }}</td>
<td>{{ props.item[11] }}</td>
<td>{{ props.item[12] }}</td>
<td>{{ props.item[13] }}</td>
</tr>
</template>
J'attends que lorsque la ligne est cliquée, la fonction editItem est appelée
3 Réponses :
J'ai trouvé un moyen de contourner cela en utilisant @click:row
highlightClickedRow(value) {
const tr = value.target.parentNode;
tr.classList.add('highlight');
},
La fonction handleClick renvoie une valeur de l'élément cliqué, j'appelle donc la méthode que je souhaite handleClick à la valeur dans la méthode handleClick . J'ai également mis en évidence manuellement la ligne sur laquelle j'ai cliqué car je n'ai pas trouvé de moyen Vuetify de le faire.
Un exemple de la méthode handleClick est ici:
handleClick(value) {
this.highlightClickedRow(value);
this.viewDetails(value);
},
Vous pouvez également accéder à la ligne sur laquelle vous avez cliqué en utilisant event.target. L'exemple est ici
<v-data-table :headers="headers" :items="desserts" :items-per-page="5"
class="elevation-1" @click:row="handleClick">
</v-data-table>
highlightClickedRow(value) doit être highlightClickedRow(event) ou la deuxième ligne let tr = event.target.parentNode; devrait être let tr = value.target.parentNode;
@SimonThiel Comment puis-je obtenir l'objet événement pour highlightClickedRow (événement). J'obtiens l'erreur «Impossible de lire la propriété 'parentNode' d'undefined» lors de l'accès à la cible à partir de l'obj d'événement. Comment puis-je résoudre ce problème?
Si quelqu'un est intéressé de voir l'exemple de travail, ci-dessous est le lien. codepen.io/mshrestha/pen/VwavGQa
Cette solution est la meilleure pour, peut-être vous aider, elle fonctionne avec vuetify 2.x.
{
// inside Vue Component
methods: {
openLink(link) {
console.log(`opened link ${link}`)
}
}
}
<v-data-table
:options="{ openLink }"
>
<template v-slot:body="{ items, options }">
<tbody>
<tr
v-for="item in items"
:key="item.id"
>
<td>
<button @click="() => options.openLink(item)" />
</td>
</tr>
</tbody>
</template>
</v-data-table>
Regardez: Data Table Api - slots.body c'est pour moi, le meilleur approchable pour résoudre ce problème.
Cette approche altère la réactivité du tableau sur les différentes fenêtres puisque vous remplacez les styles par défaut. Vous pouvez y aller si vous a) Ne vous souciez pas de la réactivité de la page ou b) êtes prêt à concevoir vos propres styles réactifs en conséquence
bien sûr ? Je suis utilisé dans le produit de publication et je n'ai aucun problème avec cette approche.
J'ai une autre solution avec la mise en évidence. Parce que l'idée d'Anjayluh ne fonctionnait pas pour moi.
dans Vuetify 2.0.0
modèle
.selected {
background-color: red
}
et la méthode script
handleClick(row) {
// set active row and deselect others
this.desserts.map((item, index) => {
item.selected = item === row
this.$set(this.desserts, index, item)
})
// or just do something with your current clicked row item data
console.log(row.sugar)
},
et un style
<v-data-table :headers="headers" :items="desserts" :class="[item.selected && 'selected']" @click:row="handleClick" /> ... </v-data-table>
Cela résout votre problème: codepen.io/nsiggel/pen/KRdGgE
En fait, j'ai eu l'idée dans mon exemple de code à partir d'ici, mais cela ne semble pas fonctionner de mon côté. Si vous remarquez que nos modèles sont assez similaires bien que j'aie manqué ce @ click = "editItem (props.item) mais même après l'avoir ajouté, le mien ne fonctionne pas
J'ai essayé d'exécuter le même code ici <codepen.io/nsiggel/pen/KRdGgE> sur mon application et l'événement ne fonctionne toujours pas ici. Cela pourrait-il être un problème de version vuetify?
Pourriez-vous faire un exemple de codepen où votre problème peut être reproduit?
Je ne sais pas comment faire ça