VuetifyのDataTableの列幅を固定にする方法

こんにちは！スギモトです！

業務でVuetifyを1年以上使っているので、その中で得た知見を備忘録的に残していきたいと思います。

今回は業務アプリケーションでは必ず登場するであろうDataTableで半日ハマった「列幅の固定」です。

同じくちょうどハマっていて、ここにたどり着いた人の参考になれば幸いです。

関連記事

VuetifyのDatePickerを日本語化してみる

Ｎｕｘｔ．ｊｓビギナーズガイドＶｕｅ．ｊｓベースのフレームワークによるシングルペ /シ-アンドア-ル研究所/花谷拓磨

posted with カエレバ

楽天市場

Amazon

VuetifyのDataTableの列幅を指定した値で固定する

Vuetifyの公式サイトではheaderで指定するとwitdhを設定できると下記の通り記載されているのですが、実際やってみるとうまくいきません。

ただ、設定するとなんとなく幅指定ができている様子。

これはどうやって使うのか色々試していくと、どうやらslotを使ってヘッダー部とデータ部を分けて書いているとダメな感じ。

以下、成功したときのheaders

headers: [
         { text: 'デザート (100g当たり)',align: 'left',value: 'name',width: '16%' },
         { text: 'カロリー', value: 'calories',width: '16%' },
         { text: '脂肪 (g)', value: 'fat',width: '16%' },
         { text: '炭水化物 (g)', value: 'carbs',width: '16%' },
         { text: 'たんぱく質 (g)', value: 'protein',width: '16%' },
         { text: '鉄 (%)', value: 'iron',width: '16%' }
       ],

６列あるので、100% ÷ 6 で16％を指定することで、均等に分割されます。

割合を変えたい場合は、それぞれ配分を変更していく感じなんですかね？

割合でなく固定値にしてみる

headers: [
         { text: 'デザート (100g当たり)',align: 'left',value: 'name',width: '350' },
         { text: 'カロリー', value: 'calories',width: '320' },
         { text: '脂肪 (g)', value: 'fat',width: '320' },
         { text: '炭水化物 (g)', value: 'carbs',width: '320' },
         { text: 'たんぱく質 (g)', value: 'protein',width: '320' },
         { text: '鉄 (%)', value: 'iron',width: '320' }
       ],

うーん、開発者ツールで確認するとHTMLには設定されているのですが実際その値にはなっていません。若干の誤差があるのはなぜ？？