こんにちは！スギモトです！
業務でVuetifyを1年以上使っているので、その中で得た知見を備忘録的に残していきたいと思います。
今回は業務アプリケーションでは必ず登場するであろうDataTableで半日ハマった「列幅の固定」です。
同じくちょうどハマっていて、ここにたどり着いた人の参考になれば幸いです。
関連記事
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には設定されているのですが実際その値にはなっていません。若干の誤差があるのはなぜ？？
まとめ
社内システムではDataTableを乱発するので、この辺がちゃんとしてないとイマイチ困るんですよねぇ。