Vuetify의 v-data-table에서 홀수 행의 배경색 변경
하고 싶은 일
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>
완성!
Reference
이 문제에 관하여(Vuetify의 v-data-table에서 홀수 행의 배경색 변경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/chanchanko/items/ea918401e608d3fc4d13
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
일반적으로 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>
완성!
Reference
이 문제에 관하여(Vuetify의 v-data-table에서 홀수 행의 배경색 변경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/chanchanko/items/ea918401e608d3fc4d13텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)