【メモ】BootstrapVueで見出しのないtableを作る

BootstrapVueを使うと簡単にテーブルを作成することができます。ドキュメントを参考に簡単に書くとこんな感じ。

<template>
 <div>
   <b-table :items="items"></b-table>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       items: [
         { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
         { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
         { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
         { age: 38, first_name: 'Jami', last_name: 'Carney' }
       ]
     }
   }
 }
</script>

描画するとこんな感じになります。

Age	First Name	Last Name
40	Dickerson	Macdonald
21	Larsen	Shaw
89	Geneva	Wilson
38	Jami	Carney

かなり便利なんですが、ドキュメントを見る限り見出しを削除するオプションがないんですよね。見出しをどんな感じに表示するかとか、見出しでソートするかとか、そういうオプションはあるんだけども。

じゃあどうするか

よーーーく見ると、こんなオプションがありました。

Property	Type	Default	Description
thead-class	String or Array or Object		CSS class (or classes) to apply to the thead element

これを利用すれば見出しを非表示にすることが出来ます。こんな感じ。

<template>
 <div>
   <b-table thead-class="d-none" :items="items"></b-table>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       items: [
         { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
         { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
         { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
         { age: 38, first_name: 'Jami', last_name: 'Carney' }
       ]
     }
   }
 }
</script>

40	Dickerson	Macdonald
21	Larsen	Shaw
89	Geneva	Wilson
38	Jami	Carney

これでいいかどうかはわかりませんが、実現出来てるからまあ良いかな。

じゃあどうするか

Related Posts