# vuetify 로
# 위쪽은 v-toolbar 를 위치시키고
# 왼쪽에 v-navigation-drawer(sidebar)를 위치시키고
# 오른쪽에 v-data-table 을 위치하도록 구성했다.
# v-data-table 의 컬럼 개수가 많아
# 브라우저의 폭을 줄일때 맨 오른쪽 부분이 보이지 않는 문제가 발생했다.
# 원래 v-data-table 자체에서 횡스크롤이 가능하고
# 브라우저 폭이 일정 크기 아래로 줄어 들면
# breakpoint 로직이 작동해 아래쪽으로 컬럼이 적절하게 보여진다.
# 하지만 v-data-table 에서도 sidebar 폭만큼 오른쪽 더 스크롤 되지 않는다.
# 원인은 div 의 overflow css 속성이 안돼 발생한것으로
# scroll 또는 auto 로 명시해야 화면 횡스크롤이 된다.(이걸 몰라 계속 삽질ㅠ)
vi app.vue
<style>
/* toolbar, sidebar 는 고정하고 오른쪽 영역에서 화면 횡스크롤 하기 위한 css */
.top-view {
position: fixed; /* 스크롤 해도 위치 고정 */
width: 100%; /* 전체 너비 채우기 */
z-index: 99; /* 같은 위치에 여러 엘리먼트가 위치할때 이 값이 클수록 앞쪽(위로 덮는)으로 온다. vuetify default z-index : 5 */
}
.body-view {
display: flex; /* 모든 요소를 한줄에 표시 */
margin-top: 50px; /* top-view 높이 감안해서 50px 만큼 아래에 위치 */
}
.left-view {
display: flex; /* 모든 요소를 한줄에 표시 */
position: fixed; /* 스크롤 해도 위치 고정 */
height: 100%; /* sidebar 높이를 전체 채우기 */
}
.right-view {
width: 100%; /* 오른쪽 영역의 폭을 전체 채우기 */
overflow: auto; /* 또는 scroll 값, 횡스크롤 가능하도록 */
margin-left: 100px; /* sidebar 폭 감안해서 100px 만큼 오른쪽에 위치 */
}
</style>
<template>
<v-app>
<div class="top-view>
<ysoftmanToolbar />
</div>
<div class="body-view">
<div class="left-view">
<ysoftmanNavigation />
</div>
<div class="right-view">
<ysoftmanDatatable />
</div>
</div>
</v-app>
</template>
<script>
import ysoftmanToolbar from '@/components/ysoftmanToolbar';
import ysoftmanNavigation from '@/components/ysoftmanNavigation';
import ysoftmanDataTable from '@/components/ysoftmanDataTable';
export default {
name: 'App',
components: {
ysoftmanToolbar,
ysoftmanNavigation,
ysoftmanDataTable,
},
data() {
return {};
},
};
</script>
