Prenez la table de données v de Vuetify comme exemple pour implémenter la fonction de masquage conditionnel des colonnes
P粉775723722
P粉775723722 2023-08-25 14:48:06
0
1
541
<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>
P粉775723722
P粉775723722

répondre à tous(1)
P粉681400307

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

computed: {
  headers() {
    const headers = [
      // 其他表头定义
    ]
    if(this.hasPermission('update center')) {
      headers.push({
        // actions 表头定义
      })
    }

    return headers
  }
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!