Vuetify の v-data-table を例として、条件付きで列を非表示にする機能を実装します。

Question

列 v-data-table と actions を含むテーブルがあり、ユーザーが特定の権限を持っている場合にのみこの列を表示したいと考えています。許可を確認するためにミックスインを使用しています。

次のことを試しましたが成功しませんでした:

<template v-slot:[`header.actions`]="{ header }" v-if="hasPermission('アップデート センター')">
  {{ ヘッダーテキスト }}
</テンプレート>

コンポーネント ファイルでミックスインを使用する方法は次のとおりです:

「../layouts/Base/Base.vue」から BaseLayout をインポートします;
「../../../mixins/hasPermissions」から hasPermission をインポートします。
        
デフォルトのエクスポート {
  ミックスイン: [許可あり]、
...
}

結果: [1]: https://i.stack.imgur.com/aVSgJ.png

Answer 1

header.actions は、actions 列ヘッダーのレンダリングをオーバーライドするために使用されるスロットです。これを渡さない場合 (条件が false の場合)、Vuetify はデフォルトの表現をレンダリングします。

特定の列を条件付きで非表示にする (レンダリングしない) 場合は、テーブル ヘッダーを computed

として定義します。 リーリー