bootstrap-vue 테이블의 헤더 행을 숨기는 방법

bootstrap-vue 테이블의 헤더 행을 숨기는 방법

bootstrap-vue기본적으로는 데이터에 대한 헤더 행이 생성됩니다.의 헤더 행을 숨길 수 있는 방법이 있습니까?<b-table>데이터 항목만 렌더링되도록 할 수 있습니까?

여기 매뉴얼에서 헤더에 대한 클래스를 설정하는 옵션이 있습니다(즉, 생성된 것).<thead>)와 함께thead-class로 설정하다<b-table>또는 헤더 행(즉,<tr>밑에 있는 요소<thead>)와 함께thead-tr-class로 설정하다<b-table>주의해 주세요.<style>스코프가 설정되어 있으면 동작하지 않습니다.이 아이디어를 바탕으로 한 간단한 컴포넌트를 소개합니다.

<template>
  <b-table :items="items" thead-class="hidden_header"/>
</template>

<script>

export default {
  name: 'my-table',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

<!-- If we add "scoped" attribute to limit CSS to this component only 
     the hide of the header will not work! -->
<style scoped>
    <!-- put scoped CSS here -->
</style>
<style>
.hidden_header {
  display: none;
}
</style>

단순히 "부트스트랩 매직"을 사용하여thead-class="d-none"헤더 행을 숨기려면:

<template>
  <b-table :items="items" thead-class="d-none" />
</template>

필드 객체에 각 열을 추가합니다.

fields: [{
  key: 'key_here',
  label: 'Column Name',
  thStyle: {
     display: 'none'
  }
]

docs에는 행을 완전히 숨길 수 있는 것이 없는 것처럼 보이지만 CSS를 사용하여 행을 숨길 수 있습니다.

table > thead {
    display:none !important;
}

!important 플래그는 기본 설정을 덮어씁니다.

언급URL : https://stackoverflow.com/questions/49842860/how-to-hide-bootstrap-vue-table-header-row