하고 싶은 일

Vuetify에 준비된 테이블 구성 요소 [v-data-table]가 기본값으로 아직 어려웠기 때문에,
자주 하는 홀수 행만 색이 바뀌고 있는 일람으로 하고 싶다

익숙한 CSS를 설정해보십시오.

일반적으로 CSS에서 홀수 행의 색상을 변경하도록 지정

App.vue

<style scoped>
.v-data-table td {
    background: #f0f8ff;
}
.v-data-table tr:nth-child(odd) td {
    background: #fff;
}
</style>

변하지 않는다. . .
아, scoped가 붙어 있으니까 아이 컴퍼넌트에는 반영되지 않나. . .

App.vue

<style>
.v-data-table td {
    background: #f0f8ff;
}
.v-data-table tr:nth-child(odd) td {
    background: #fff;
}
</style>

변했다!
···하지만, 마우스 오버하고 있는 행의 배경색이 변하지 않게 되었다. . .

테이블의 스타일을 덮어 썼기 때문에?
어쩔 수 없으니까 스스로 설정해 준다.

App.vue

<style>
.v-data-table td {
    background: #f0f8ff;
}
.v-data-table tr:nth-child(odd) td {
    background: #fff;
}
.v-data-table tr:hover td {
    background-color: #eee;
}
</style>

완성!