vue.js vuetify data-table style overflow hidden not working

2021-04-23 06:04

최근 vuetify 로 개인 미니 프로젝트를 만들고 있는데 이런 증상이 많다. 아직 부트스트랩에 비교해서 충분히 성숙되지 못했다고 느끼는점이 개발 모드에서는 잘 되다가 실제 릴리즈 모드로 빌드하고 올리게 되면 스타일이 적용이 안되는 경우가 있다.

어쩔수 없이 스타일을 적용하는 방법을 변경하거나 스타일을 하나 별도로 추가해서 해결을 했다.

before. 변경 전. 스타일이 적용이 되지 않는 문제

height="40vh"
style="overflow-x:hidden;overflow-y:auto;"

alfter 변경 후. height를 style에 추가해서 해결함.

style="overflow-x:hidden;overflow-y:auto;height:40vh"

꼭 height 스타일을 추가해야 해결되는 것이 아니라 내가 작성한 v-data-table 태그가 vuetify 에 의해서 파싱되어서 일반 html - vue 스타일로 다시 렌더링이 될때 일부 스타일을 파싱할 때 버그가 있는 것 같다.

<v-data-table
            id="dtTicker"
            :headers="headers"
            :items="$store.state.ticker.curTicker.arrTicker"
            :items-per-page="2000"
            :search="search"
            item-key="market"
            dense
            mobile="false"
            mobile-breakpoint="0"
            hide-default-footer
            :expanded.sync="$store.state.ticker.curTicker.expanded"
            :single-expand="singleExpand"
            class="elevation-1"
            :loading="$store.state.ticker.curTicker.arrTicker.length == 0"
            loading-text="Loading... Please wait"
            fixed-header
            single-sort
            :sort-by="'acc_trade_price_24h'"
            :sort-desc="false"
            :custom-sort="customSort"
            
            style="overflow-x:hidden;overflow-y:auto;height:40vh"
          >

괜히 vuetify를 적용했나… 싶기도 하다. 그냥 부트스트랩(bootstrap)을 쓸걸 그랬나…

Written by@[namu]

모바일, 스마트폰, 금융, 재테크, 생활 정보 등