Vuetify v-data-table 고정 헤더가 작동하지 않음

Vuetify v-data-table 고정 헤더가 작동하지 않음

Vuetify 사용v-data-table컴포넌트 및 세트fixed-header속성이지만 테이블 머리글이 테이블 본문과 함께 스크롤됩니다.최신 크롬을 사용하고 있습니다.그 행동을 바로잡는 방법을 제대로 할 수 있는 사람이 있을까요?

높이 속성을 지정해야 합니다.높이="100%"로 합격할 수 있어 동작합니다.

<v-data-table
      height="400"
      v-model="selected"
      :headers="headers"
      fixed-header
      :items="desserts"
      item-key="name"
    >
</v-data-table>

https://codepen.io/ellisdod/pen/gOpzBmQ

나를 위해.height="100%"동작하지 않았습니다만, 픽셀의 높이를 설정하는 것도 선택사항이 아닙니다.테이블의 페이지 높이를 모두 소비하고 싶기 때문입니다.height="100vh"여러분들에게 도움이 되길 바랍니다.

<v-data-table
    :headers="headers"
    :items="items"
    disable-pagination
    fixed-header
    hide-default-footer
    dark
    height="100vh">
</v-data-table>

PS: 인정된 답변 아래에 코멘트로 기재하는 것이 좋을지도 모릅니다만, 저는 평판이 좋지 않기 때문에, 여러분, 죄송합니다.

만약 당신이 고정된 높이를 원하지 않고 당신의 테이블이 가능한 모든 공간을 차지하기를 바란다면, 저는 해결책을 찾았습니다.

Flexbox를 사용하여flex-grow: 1; overflow: hidden;컨테이너에서 클래스를 테이블 자체에 설정합니다.display: flex; flex-grow: 1;

다음은 코드펜 데모입니다.https://codepen.io/esquilax76/pen/gOoGyPb

도움이 되었으면 좋겠다!

언급URL : https://stackoverflow.com/questions/60711726/vuetify-v-data-table-fixed-header-not-working