vuetify v-data-table 적용하기, vue modal 모달 화면 구성하기 #17

국회도서관 자료 검색의 마지막 단계인 상세 페이지는 모달 화면으로 작성한다.

이 페이지에서는 부모 컴포넌트에서 전달된 데이터를 기반으로 v-data-table을 적용하는 방법을 알아본다.

 

☞ 소스 개발순서는 이전 글 참고

vue v-router 통해 타 페이지 호출 방법 및 데이터 전달 방법 #15

 

1. Vuetify v-data-table 소개

 

v-data-table 컴포넌트는 표 형식의 데이터를 효율적으로 표시하는 기능을 제공한다.

 

✅ 주요 기능:

• 정렬, 검색, 페이징 지원

• 행 선택 및 내용 편집 가능

• 커스텀 헤더 및 푸터 설정

 

🔗 참고 문서 :

Data table component

 

2. 상세 도서 정보 모달 화면 구현

 

아래 코드는 v-data-table을 활용한 도서 상세 정보 모달 화면의 구현 예제이다.

 

📌 파일 경로: ./pages/ResultDtl.vue

 

✅ 상세 도서 정보 모달 화면 코드

<template> 
    <div class="modal-wrap">
        <div class="modal-container">
            <h2 v-bind:align="dtlCenter">상세 도서 정보</h2>
            
            <!-- Vuetify v-data-table 적용 -->
            <v-data-table                     
                :headers="headers"                     
                :items="items"                    
                :footer-props="footerProps"
                class="elevation-1"
            ></v-data-table>                

            <!-- 확인 버튼 -->
            <div v-bind:align="dtlCenter" class="modal-btn">
                <button v-on:click="modalOpen">확인</button>
            </div>            
        </div>        
    </div>
</template>

<script>
import router from '../assets/index'

export default {
    data() {
        return {            
            dtlCenter: 'center',
            modalCheck: false,            
            headers: [
                { text: 'Name', width: '10%', align: 'center', value: 'name' },
                { text: 'Value', align: 'center', value: 'value' }
            ],
            footerProps: {
                itemsPerPageOptions: [5, 10, 15, -1],
                showFirstLastPage: false,
                itemsPerPageText: '페이지 당 Row 수:',
                itemsPerPage: 10,
                page: 1,
                pageText: '{0} - {1} of {2}',
            }
        };
    },
    props: {
        items: {
            type: Array,
            required: true,            
        }        
    },
    methods: {
        goBack() {
            router.go(-1);
        },
        modalOpen() {
            this.$emit('childClose');
        }
    },
};
</script>

 

3. 모달 및 v-data-table 스타일 적용

 

모달 창과 v-data-table의 스타일을 정의하는 CSS 코드이다.

이 스타일은 ./main.js에서 import되어 적용된다.

 

📌 파일 경로: ./assets/style.css

 

✅ 모달 및 v-data-table 스타일 코드

/* 모달 배경 */
.modal-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

/* 모달 컨테이너 */
.modal-container {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

/* v-data-table 푸터 스타일 */
.v-data-footer {
    display: flex;
    justify-content: flex-end;    
}

/* v-data-table 헤더 스타일 */
.v-data-table thead th {
    font-size: 15px !important;
    font-weight: 800;
}

 

4. 마무리

 

이번 포스트에서는 Vuetify의 v-data-table을 활용하여 모달 화면을 구성하는 방법을 살펴보았다.

다음 포스트에서는 완성된 화면과 적용된 기술에 대해 보다 자세히 정리해본다.

 

☞ 국회도서관 자료검색 API 호출하는 django 설치는 이전 글 참고

API Server django python Framework 설치 #1

 

☞ vue, vue cli 설치는 이전 글 참고

vue, vue cli 설치하고 버전 확인 #12