vuetify data table 에서 column hidden 처리하기
2022. 1. 7. 16:14
728x90
반응형
보통 개발을 하면서 테이블의 row를 클릭을 하면 키값을 가져와서 View 화면이던지 수정화면으로 이동을 하게 됩니다.
하지만 보이지 않는 데이터를 가져오기 위해서는 키값을 안 보이게 처리를 해야하는데요.
먼저 vuetify Visibility 를 참고하여야합니다.
https://vuetifyjs.com/en/styles/display/#visibility
Display helpers
Display helper classes allow you to control when elements should display based upon viewport.
vuetifyjs.com
위의 class를 사용하는 방법은 아래와 같습니다.
반응형
{ text: '나이', value: 'age', align: ' d-none' },https://islet4you.tistory.com/entry/vuetify-data-Table-example
vuetify data Table example
역시 업무에서 제일 많이 쓰이는 것은 table 입니다. data table 의 예제는 아래와 같습니다. 일단 화면단에 배치하는 것만 vuetify 에 있는 것을 사용하였습니다. 화면단 소스 : script 소스 : detailList: [ {
islet4you.tistory.com
위의 예를 보시면 적용된 사례를 보실 수 있습니다.
주의하실점은 align 에 적용하실때는 공백을 두고 적용을 하셔야 됩니다.
728x90
'개발관련 > VUE JS' 카테고리의 다른 글
| vuetify dialog 사용하는 방법 (0) | 2022.01.11 |
|---|---|
| vuejs 라이프사이클 다이어그램 (0) | 2022.01.10 |
| vuetify data Table example (0) | 2022.01.07 |
| vuetify select UI component example (0) | 2022.01.07 |
| vuetify 화면 구성 예제 (0) | 2022.01.07 |
