[解決済み] B-tableのBootstrapVue条件列
2022-03-04 16:44:46
質問
現在のユーザーが管理者である場合にのみ、コラムの1つを表示したいのですが。bootstrapVueでこれを行う方法がよくわかりません。何かアイデアはありますか?
解決方法は?
Troyのコメントに基づいて、スニペットを紹介します。
というカスタムプロパティをフィールドオブジェクトに追加しました。
requiresAdmin
. これは標準の
Bootstrap-Vue
.
これを使用して、ユーザーが管理者であることを必要とするすべてのフィールドを、計算されたプロパティでフィルタアウトすることができます。ユーザーが管理者であるかどうかに基づいています。これにより、ユーザーが管理者であることを必要とするフィールドの追加と削除が簡単になります。
new Vue({
el: '#app',
computed: {
computedFields() {
// If the user isn't an admin, filter out fields that require auth.
if(!this.isUserAdmin)
return this.fields.filter(field => !field.requiresAdmin);
// If the user IS an admin, return all fields.
else
return this.fields;
}
},
data() {
return {
isUserAdmin: false,
fields: [
{ key: 'first', label: 'First Name' },
{ key: 'last', label: 'Last Name' },
{ key: 'age', label: 'Age' },
{ key: 'sex', label: 'Sex' },
{ key: 'secretActions', label: 'Secret Actions', requiresAdmin: true },
],
items: [
{ first: 'John', last: 'Doe', sex: 'Male', age: 42 },
{ first: 'Jane', last: 'Doe', sex: 'Female', age: 36 },
{ first: 'Rubin', last: 'Kincade', sex: 'Male', age: 73 },
{ first: 'Shirley', last: 'Partridge', sex: 'Female', age: 62 }
]
}
}
})
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app" class="p-3">
<b-btn @click="isUserAdmin = !isUserAdmin">
Toggle admin user ({{ isUserAdmin }})
</b-btn>
<br /><br />
<b-table :fields="computedFields" :items="items">
<template v-slot:cell(secretActions)>
<b-btn>Edit User</b-btn>
<b-btn>Delete User</b-btn>
</template>
</b-table>
</div>
関連
-
[解決済み] SCSSファイルエラー。インポートするファイルが見つからないか読めません: bootstrap
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrapのモーダルが背景の下に表示される
-
[解決済み] Bootstrapのモーダルを閉じる
-
[解決済み】モバイルレイアウトでBootstrap 3の列の順序を変更するにはどうすればいいですか?
-
[解決済み】Twitter Bootstrapのツールチップを動的に作成された要素に結合するにはどうすればよいですか?
-
[解決済み] Bootstrapのカラムを複数行にまたがるようにするにはどうすればよいですか?
-
[解決済み] Twitter Bootstrapのテーブルの幅が常に100%なのはなぜですか?
-
[解決済み] Twitter Bootstrapのモーダルでエスケープキーを使って閉じる機能を有効にするにはどうしたらいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 2.3.2のGLYPHICONS
-
[解決済み] twitterのbootstrapで五等分の列を作る
-
[解決済み】Bootstrapを使用したフォームのマークエラーについて
-
[解決済み] Twitter Bootstrap 3.0 どのように私は今 "バッジバッジ重要 "するのですか?
-
[解決済み】これらの属性は何ですか。アリア・ラベリングビー`とアリア・ヒドゥン`です。
-
[解決済み] reactjsアプリでbootstrapのcssとjsをインクルードする方法は?
-
[解決済み] Twitter ブートストラップ スクロール可能なテーブル
-
[解決済み] Bootstrap 4: ドロップダウンメニューが画面の右側にずれていく
-
[解決済み] Twitter Bootstrapのホストバージョンはありますか?[クローズド]
-
[解決済み] bowerでbootstrapを使用する