Prenez la table de données v de Vuetify comme exemple pour implémenter la fonction de masquage conditionnel des colonnes
P粉775723722
2023-08-25 14:48:06
<p>J'ai un tableau avec les colonnes <code>v-data-table</code> et <code>actions</code> et je souhaite afficher cette colonne uniquement si l'utilisateur dispose de certaines autorisations. J'utilise un mixin pour vérifier les autorisations. </p>
<p>J'ai essayé ce qui suit sans succès : </p>
<pre class="brush:html;toolbar:false;"><template v-slot:[`header.actions`]="{ header }" v-if="hasPermission('centre de mise à jour ')">
{{ en-tête }}
</modèle>
≪/pré>
<p>Voici comment j'utilise le mixin dans le fichier de composant : </p>
<pre class="brush:js;toolbar:false;">importer BaseLayout depuis "../layouts/Base/Base.vue";
importer hasPermission depuis "../../../mixins/hasPermissions" ;
exporter par défaut {
mixins : [hasPermission],
...
}
≪/pré>
<p>Résultat : [1] : https://i.stack.imgur.com/aVSgJ.png</p>
header.actions
是一个用于覆盖actions
列标题渲染的插槽。如果你不传递它(当条件为false
), Vuetify rendra la représentation par défaut.Si vous souhaitez masquer (ne pas afficher) certaines colonnes de manière conditionnelle, définissez l'en-tête de votre tableau comme
computed