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

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


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

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

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


関連記事

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



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%' }
],

6列あるので、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には設定されているのですが実際その値にはなっていません。若干の誤差があるのはなぜ??


まとめ

社内システムではDataTableを乱発するので、この辺がちゃんとしてないとイマイチ困るんですよねぇ。