bio_frontend

NUXT 3 (VUE 3) 환경

• data-list 와 dataList는 동일 변수명으로 인식
• compnenets 아래의 .vue는 자동 인식(template 내부에서만, 별도 script에서 필요시 선언 필요)

공통 페이지 구성

<template>
    <ContentsWrapper> <!-- wrapper(title) 추가 -->
        <template #actions> <!--title 우측 버튼 설정-->
            <button>추가</button>
            <button>저장</button>
        </template>
        <!--메인 콘텐츠 영역-->
        <input type="text" >
        <!--메인 콘텐츠 영역-->
    </ContentsWrapper>
</template>
<script setup lang="ts">
    // title(wrapper) 설정
    definePageMeta({
        title: '리소스 관리'
    })
</script>

Toast(Tui) Grid 사용법

한글 설명: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide-kor.md

기본 설정

<template>
    <button @click="onAddClick">추가</button>
    <button @click="onUpdateClick">저장</button>

    <!-- toast Grid 필수값 ref, data, columns(header) -->
    <ToastGrid  
        ref="grid1Ref"
        :data="data"
        :columns="colDefs"
    />        
</template>
  
<script setup lang="ts">
// 컬럼 항목 리스트
// composables폴더 아래에 생성
// 위 한글 성명 참조하여 생성
import {colDefs} from '../../composables/grids/resourceGrid'

// 데이터 항목
const data = [{}]

// ref 설정
// api : https://nhn.github.io/tui.grid/latest/Grid
const grid1Ref = ref();

onMounted(async () => {
  await nextTick() // DOM 및 컴포넌트 렌더링 완료 대기
  grid1Ref.value?.api()?.setBodyHeight('700') // ref api를 통해서 높이 지정
})

let no = 1;

// 항목 추가 버튼
function onAddClick() {
  grid1Ref.value?.api()?.appendRow({'no': no}); // ref api를 통해서 항목 추가  
  ++no;
}

// 저장 버튼
function onUpdateClick() {
   //grid1Ref.value?.clearGrid();
  const chageList = grid1Ref.value?.api()?.getModifiedRows(); // ref api를 통해서 변경점 읽어오기
  console.log(changeList);  
}
</script>

tree data

<template>
  <ToastGrid  
    ref="grid1Ref"
    :data="data"
    :columns="columns"
    :treeColumnOptions="treeColumnOptions"
  />  
</template>

<script setup lang="ts">
// data 설정시 _children: 항목으로 구성
const data = [
  {
    id: 549731,
    name: 'Beautiful Lies',
    price: 10000,
    downloadCount: 1000,
    listenCount: 5000,
    _attributes: {
      expanded: true,
    },
    _children: [
      {
        id: 491379,
        name: 'Chaos And The Calm',
        artist: 'James Bay',
        grade: '5',
        price: 12000,
        downloadCount: 1000,
        listenCount: 5000
      },
      {
        id: 450720,
        name: "I'm Not The Only One",
        artist: 'Sam Smith',
        release: '2014.09.15',
        type: 'Single',
        grade: '4',
        price: 8000,
        downloadCount: 1000,
        listenCount: 5000,
        _attributes: {
          expanded: true,
        },
        _children: [
          {
            id: 587871,
            name: 'This Is Acting',
            artist: 'Sia',
            release: '2016.10.22',
            type: 'EP',
            typeCode: '2',
            genre: 'Pop',
            _attributes: {
              expanded: true,
            },
            _children: [
              {
                id: 490500,
                name: 'Blue Skies',
                release: '2015.03.18',
                artist: 'Lenka',
                type: 'Single',
                typeCode: '3',
              },
              {
                id: 317659,
                name: "I Won't Give Up",
                artist: 'Jason Mraz',
                release: '2012.01.03',
                type: 'Single',
                typeCode: '3',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 436461,
    name: 'X',
    artist: 'Ed Sheeran',
    release: '2014.06.24',
    type: 'Deluxe',
    typeCode: '1',
  },
];

const columns = [
  { header: 'Name', name: 'name', width: 300 },
  { header: 'Artist', name: 'artist' },
  { header: 'Type', name: 'type' },
  { header: 'Release', name: 'release' },
  { header: 'Genre', name: 'genre' },
];

// tree column 설정
const treeColumnOptions = { name: 'name', useCascadingCheckbox: true };

const grid1Ref = ref();
</script>