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

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

이 페이지에서는 parent 화면에서 넘어온 파라미터로 v-data-table을 적용해 본다.

 

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

https://yuneenelife.tistory.com/entry/vue-v-router-통해-타-페이지-호출-방법-및-데이터-전달-방법-15

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

vuetify v-data-table

v-data-table 컴포넌트는 표 형식의 데이터를 표시하는 데 사용된다.

기능에는 정렬, 검색, 페이징 처리, 내용 편집 및 행 선택이 있다.

☞ 참고 URL

https://v2.vuetifyjs.com/en/components/data-tables/

 

소스 코딩

• ./pages/ResultDtl.vue
  • 상세 도서 정보
  • vuetify v-data-table 적용
  • v-data-table headers 세팅
  • v-data-table footer 옵션 값 세팅

<template> 
    <div class="modal-wrap">
        <div class="modal-container">
            <h2 v-bind:align="dtlCenter">상세 도서정보</h2>
            <template>                
                <v-data-table                     
                    :headers="headers"                     
                    :items= "items"                    
                    :footer-props="footerProps"
                    class="elevation-1"
                ></v-data-table>                
            </template>
            <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: function() {
            router.go(-1)
        },
        modalOpen: function() {
            this.$emit('childClose');
        }
    },
}
</script>

• ./assets/style.css
  • 이전에 생성된 assets 폴더 안의 style.css
  • 해당 파일은 ./main.js 파일에 import 되어짐
  • modal 관련 css와 v-data-table 관련 css 작성

.modal-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}
  /* modal or popup */
.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-footer {
    display: flex;
    justify-content: flex-end;    
}
.v-data-table thead th {
    font-size: 15px !important;
    font-weight: 800;
}

마무리

vuetify의 v-data-table 사용과 modal 화면 작성까지 해보았다.

다음에는 완성된 화면과 적용된 기술에 대해 정리해 본다.

 

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

https://yuneenelife.tistory.com/entry/API-Server-django-python-Framework-설치-1 

API Server django python Framework 설치 #1

 

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

https://yuneenelife.tistory.com/entry/vue-vue-cli-설치하고-버전-확인-12

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