Vue3 기초 예제 - 테이블 라이브러리 적용(PrimeVue)

"PrimeVue" 라이브러리를 사용하여 테이블을 생성하는 기초 예제

*동적 데이터 테이블 생성, Axios API 통신, Modal open/close

* 전체 조회 후 동적 페이징

*API 관련 설명 생략

*자세한 설명 생략

 

 

▷ PrimeVue  설치

*vue-cli를 통해 Project 생성 후 진행

 

💡npm install primevue

 

 

▷ 기초 예제 - 테이블 라이브러리 적용

 

- main.js

*PrimeVue 라이브러리 등록

import { createApp } from 'vue'
import App from './App.vue'

import { router } from '@/module/router/MenuNav.js'
import { createPinia } from 'pinia'

import PrimeVue from 'primevue/config';
import 'primevue/resources/themes/lara-light-teal/theme.css'

createApp(App)
    /** 모듈 사용 등록 */
    .use(router)
    .use(createPinia())
    
    /** 라이브러리 사용 등록 */
    .use(PrimeVue)
    
    /** 연결 */
    .mount('#app')

 

- CCM.vue

*공통 코드를 관리하는 Component

*전체 코드

<template>
    <div>
        <h1>👤 컨텐츠 코드 관리</h1><br />
        <div>
            <h3>컨텐츠 코드 추가</h3>
            <input v-model="inAreaCd" placeholder="공간코드(A00)">
            <input v-model="inContentsCd" placeholder="컨텐츠코드(C00)">
            <input v-model="inContentsNm" placeholder="컨텐츠이름">
            <button @click="contentsMerge('INSERT', inAreaCd, inContentsCd, inContentsNm);">추가</button>
        </div><br /><br />
        <div style="width: 50%;">
            <h3>컨텐츠코드</h3>
            <DataTable 
                :value="ContentsList" 

                :rows="5" 
                :rowsPerPageOptions="[5, 10, 20, 50]" 
                paginator

                selectionMode="single"
                @row-select="openModal"
            >
                <Column header="공간 코드" field="areaCd" sortable />
                <Column header="컨텐츠 코드" field="contentsCd" sortable />
                <Column header="컨텐츠 이름" field="contentsNm" sortable />
            </DataTable>
        </div>
    </div>


    <!-- modal -->
    <div class="modal" v-if="modalState">
        <h2>컨텐츠 코드 수정/삭제</h2><br />
        <div class="modalContent">
            <h4>공간 코드 : </h4>
            <h1>{{ modalAreaCd }}</h1><br />
            <h4>컨텐츠 코드 : </h4>
            <h1>{{ modalContentsCd }}</h1><br />
            <h4>컨텐츠 이름 : </h4>
            <p><input style="font-size:30px" v-model="modalContentsNm" placeholder="컨텐츠이름"></p>
            <br />
        </div><br /><br />
        <div>
            <button style="font-size: 30px;"
                @click="contentsMerge('UPDATE', modalAreaCd, modalContentsCd, modalContentsNm)">👨‍🔧(수정)</button>
            <button style="font-size: 30px; margin-left: 10px;"
                @click="areaDelete(modalAreaCd, modalContentsCd)">🧺(삭제)</button>
        </div><br />
        <div>
            <h4 @click="colseModal()">❌(닫기)</h4>
        </div>
    </div>
    <!-- /modal -->
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useLoginStore } from '@/module/store/LoginStore.js'
import { API_LIST, sendPost } from '@/module/AxiosModule'

import DataTable from 'primevue/datatable';
import Column from 'primevue/column';


const ContentsList = ref([])

const inAreaCd = ref("")
const inContentsCd = ref("")
const inContentsNm = ref("")

const modalState = ref(false)
const modalAreaCd = ref("")
const modalContentsCd = ref("")
const modalContentsNm = ref("")


onMounted(() => {
    /** 로그인 체크 */
    useLoginStore().checkUser()

    /** 컨텐츠 코드 테이블 초기화 */
    areaInit()
})

/** modal open */
function openModal(row) {
    modalState.value = true
    modalAreaCd.value = row.data.areaCd
    modalContentsCd.value = row.data.contentsCd
    modalContentsNm.value = row.data.contentsNm
}

/** modal close */
function colseModal() {
    modalState.value = false
}

/** 컨텐츠 코드 테이블 초기화 */
async function areaInit() {

    inAreaCd.value = ""
    inContentsCd.value = ""
    inContentsNm.value = ""

    /* 컨텐츠 코드 전체 조회 요청 */
    const resVO = await sendPost(API_LIST['BHS-CCM-1001'], {})
    if (resVO.resultCode == "0000") {
        // 정렬
        ContentsList.value = resVO.result.sort((a, b) => a.areaCd.localeCompare(b.areaCd))
    }
}

/** 컨텐츠 코드 추가/수정 */
async function contentsMerge(action, areaCd, contentsCd, contentsNm) {

    /* 입력 값 확인 */
    if (areaCd == "" || contentsCd == "" || contentsNm == "") {
        alert("입력 값을 확인 해주세요.")
        return
    }

    if (action == "INSERT") {
        for (const i in ContentsList.value) {
            if (ContentsList.value[i].contentsCd == contentsCd) {
                alert("컨텐츠코드 중복입니다. 다시 입력해주세요.")
                return
            }
        }
    }

    /* 요청 값 설정 */
    const REQ_DATA = {
        "areaCd": areaCd,
        "contentsCd": contentsCd,
        "contentsNm": contentsNm
    }

    /* 컨텐츠 코드 추가/수정 요청 */
    const resVO = await sendPost(API_LIST['BHS-CCM-1003'], REQ_DATA)
    if (resVO.resultCode == "0000") {
        action == "INSERT" ? alert("컨텐츠 코드 추가 완료 됐습니다.") : alert("컨텐츠 코드 수정 완료 됐습니다.")

        /** modal close */
        colseModal()

        /** 컨텐츠 코드 테이블 초기화 */
        areaInit()
    } else {
        alert(resVO.resultMsg)
        return
    }
}

/** 컨텐츠 코드 삭제 */
async function areaDelete(areaCd, contentsCd) {

    /* 요청 값  설정 */
    const REQ_DATA = {
        "areaCd": areaCd,
        "contentsCd": contentsCd
    }

    /* 컨텐츠 코드 삭제 요청 */
    const resVO = await sendPost(API_LIST['BHS-CCM-1004'], REQ_DATA)
    if (resVO.resultCode == "0000") {
        alert("컨텐츠 코드 삭제 완료 됐습니다.")

        /** modal close */
        colseModal()

        /** 컨텐츠 코드 테이블 초기화 */
        areaInit()
    } else {
        alert(resVO.resultMsg)
        return
    }
}
</script>

 

*테이블 라이브러리 적용 부분

<DataTable 
    :value="ContentsList" 

    :rows="5" 
    :rowsPerPageOptions="[5, 10, 20, 50]" 
    paginator

    selectionMode="single"
    @row-select="openModal"
>
    <Column header="공간 코드" field="areaCd" sortable />
    <Column header="컨텐츠 코드" field="contentsCd" sortable />
    <Column header="컨텐츠 이름" field="contentsNm" sortable />
</DataTable>

*DataTable, Column : primevue 라이브러리 사용

 

*:value : 테이블을 생성할 Data List

    *Data List : 서버에서 응답받은 Json Object 데이터

 

*:rows : 테이블 default row 설정

*:rowsPerPageOptions : 테이블 default row 옵션 설정

*paginator : 페이징 적용

 

*selectionMode="single" : row 선택 옵션 설정(single : 한 줄)

*@row-select : row 선택 시 실행할 function name 설정(openModal function 참고)

 

*<Column header="컬럼 명", field="Data List Object 항목", sortable />

*sortable : 정렬 옵션 설정

*주의 : row number 자동 생성 안됨, Object 항목에 없는 데이터는 빈 값

 

▷ 결과 확인

*로그인 validaition 제외

 

① 초기 화면

 

② default row 변경 확인

 

③ 테스트 데이터 추가

 

④ 생성 완료와 정렬 기능 확인

 

*나머지 기능은 이전 포스팅과 동일

*이전 아래 관련 글 참고(Vue3 기초 예제 - CRUD 관리자 페이지)

 

 

▷ 참고

PrimeVue | Vue UI Component Library

 

 

▷ 관련 글

Vue3 기초 예제 프로젝트 정리