v-data-table の選択色 ( Vue3 + Vuetify3 )

Vuetify3 の破壊的変更はかなり破壊的

2023年いっぱいでVue2のサポートが終了し、いやいやながらVue3移行をしました。Vue3対応のVuetify3には破壊的変更が多いですね。

v-data-table は長らく正式リリースできずにいたため、ぎりぎり(間に合ってはいない)で対応する羽目になりました。

で、このv-data-tableですが、Vuetify2では選択行(trタグ)に特別なclassを指定していたので、色の変更(薄い灰色)がされていたが、Vuetify3ではそのような選択行のclassがないため、色がつかない。
困った。

Vuetify3 v-data-table の仕様 (セクション：選択)

Vuetify2 v-data-table の仕様 (セクション：選択)

対策: CSSで :has() を指定

sample_v3.css

tr:has(i.mdi-checkbox-marked)  {
  background-color: #f5f5f5;
}

対策はCSSの :has() で選択時にチェックボックスが表示されているかを見ることにした。

もし、表の中でv-checkbox-btnを別途使う場合はこれだけでは不十分になる。その場合は、自分で選択時に見えないdiv.selected_lineみたいなclassを用意しておいて、上記と同様に:has()で見るのがよさそう。