BootstrapVueのb-tableでセル内にHTMLを書きつつclassも指定する方法

まえがき

　経験者の多いBootstrapをVue.jsで使える便利なUIフレームワークのBootstrapVue。今更これか・・・、と言いつつも使っている人は多いかと思います。そんなBootstrapVueのテーブルであるb-tableコンポーネントで、セル内にHTMLを使いつつセルそのものにclassを当てる方法を備忘録代わりにまとめておきます。

解決策

• Fieldの配列にstringだけ入れた場合は、実はkeyに値が入っているだけのオブジェクトと同じになるよ
• だからkeyに項目名を入れればHTMLを書きつつclassも指定できるよ。

fields:['名前','種類','全長']

// これは上と同じ扱い
fields:[
        {
          key: '名前',
        },
        {
          key: '種類',
        },
        {
          key: '全長',
        },
    ]

あとはclass/thClass/tdClassを追加すればセルにclassを指定できる。

具体例

fields:[
        { // 普通に表示したい時
          key: 'name',
          label: '名前',
          class: 'hoge huga',
        },
        { // セル内にHTMLタグを書きたいけどclassも指定したい時
          key: '種類',
          class: 'hoge huga',
        },
        // 文字列で指定。keyだけ指定と同じ。
        '全長',
    ]

参考資料

BootstrapVue公式ドキュメント