[Vuetify] v-data-table Column Hidden 처리 방법

서론

---

Vuetify에서 data table의 컬럼을 숨김처리하는 방법에 대한 포스팅이다. 자세한 내용은 Vuetify 공식 홈페이지에 나와있다.

 

---

 

방법

---

Vuetify 공식홈페이지 내용

 

header의 데이터 안에 align : ' d-none'를 붙여주면 된다. 여기서 d-none앞에 공백을 지우면 적용이 안되니 주의할 것.

 

예제 소스

        <v-data-table
          :headers="headers"
          :items="noticeList"
          :items-per-page="10"
          class="elevation-1"
          :search="search"
          @click:row="rowClick"
        ></v-data-table>

    headers: [
      {text: '번호', value: 'noticeNo', align:' d-none'},
      {text: '제목', value: 'noticeTitle'}
    ],

 

---

 

결과

적용 전

 

적용 후

 

---

 

Vuetify 공식 홈페이지 링크

---

https://vuetifyjs.com/en/styles/display/#display

Display helpers