vue 환경에서 IBSheet 개발 시 주의사항 (appendix)

Vue 환경에서 IBSheetVue 컴포넌트를 이용한 개발 시 주의사항 입니다.

onMounted 와 IBSheet 객체 생성

• IBSheet 객체는 비동기로 생성되기 때문에 onMounted 시점에서 시트의 생성이 완료 되지 않았을 수 있습니다.
• IBSheet 객체의 생성이 완료 된 이후에 onRenderFirstFinish 이벤트 발생합니다.
• 생성 시점을 명확하게 하시려면 IBSheetVue 컴포넌트에 v-if를 추가하여 onMounted 이후에 생성 되게끔 조절하는 것이 좋습니다.

[App.vue 파일]

<script setup>
import { IBSheetVue, IB_Preset } from '@ibsheet/vue';
import { ref, shallowRef, onMounted } from 'vue';
import { sheetData } from './data.js';

// 시트 생성 시점
const createSheet = ref(false);

// 시트 객체를 담을 ref 객체
const mySheet = shallowRef(null);

// 시트 객체 너비/높이 style
const customStyle = {
  width: '100%',
  height: '400px',
  border: '1px solid #ccc',
};

const sheetOptions = {
  LeftCols: [
    {
      Header: 'No',
      Type: 'Int',
      Width: 50,
      Align: 'Center',
      Name: 'SEQ',
      CanMove: 0,
      CanFocus: 0,
    },
  ],
  //중앙(메인) 컬럼 설정
  Cols: [
    {
      Header: '선택',
      Type: 'Bool',
      Name: 'CHK',
      Width: '50',
      Align: 'Center',
      CanEdit: 1,
    },
    {
      Header: '대차계약번호',
      Type: 'Text',
      Name: 'CONTRACTNO',
      Width: '120',
      Align: 'Center',
      CanEdit: 0,
    },
    {
      Header: '대차지점',
      Type: 'Text',
      Name: 'DELIVERYDEPTNAME',
      Width: '120',
      Align: 'Center',
      CanEdit: 0,
      TextColor: 'BLUE',
    },
    {
      Header: '차량번호',
      Type: 'Text',
      Name: 'CARNO',
      Width: '120',
      Align: 'Center',
      CanEdit: 1,
      Tip: 1,
    },
    {
      Header: '차명(FULL차명)',
      Type: 'Text',
      Name: 'CARNAMEMSTNAME',
      Width: '200',
      Align: 'Left',
      CanEdit: 1,
    },
    {
      Header: '24시간기본요금',
      Type: 'Float',
      Name: 'RENTFEE',
      Width: '120',
      Align: 'Right',
      CanEmpty: 1,
      Format: ',#.##',
    },
    {
      Header: '출고일자',
      Type: 'Date',
      Name: 'RENTDATE',
      Width: '100',
      Align: 'Center',
      Format: 'yyyy/MM/dd',
      DataFormat: 'yyyyMMdd',
      CanEdit: 0,
    },
    {
      Header: '입고일자',
      Type: 'Date',
      Name: 'RETURNDATE',
      Width: '100',
      Align: 'Center',
      Format: 'yyyy/MM/dd',
      DataFormat: 'yyyyMMdd',
      CanEdit: 0,
    },
    {
      Header: '대차유형',
      Type: 'Text',
      Name: 'PROMOCODE',
      Width: '100',
      Align: 'Center',
      CanEdit: 1,
    },
    {
      Header: '순서',
      Type: 'Text',
      Name: 'NO',
      Width: '50',
      Align: 'Center',
      DefaultValue: 'defaultValue',
    },
    {
      Header: '할인율',
      Type: 'Int',
      Name: 'DISCOUNTRATE',
      Width: '50',
      Align: 'Center',
      Format: '#,##0',
      CanEdit: 1,
    },
  ],
  Events: {
    // 시트 생성 완료 이벤트
    onRenderFirstFinish: (evt) => {
      // 시트객체 생성시 1회만 발생합니다.
      // v-if를 통해 항상 onMounted 이후에 생성됩니다.
      mySheet.value = evt.sheet; // 생성된 시트 객체를 ref객체에 담음
      mySheet.value.loadSearchData(sheetData);
    },
  },
};

// 화면 마운트 시점 (IBSheet객체는 만들어지기 전)
onMounted(async () => {
  // 화면 초기화 로직 수행
  // ....
  // 서버 데이터 가져오기 (시간이 걸리는 작업이 있다고 가정)
  await new Promise((resolve) => setTimeout(resolve, 500));

  // v-if 를 통해 onMounted 함수 마지막 부분에서 시트객체 생성
  createSheet.value = true;
});
</script>

<template>
  <h1>IBSheet + Vue</h1>
  <IBSheetVue v-if="createSheet" :options="sheetOptions" :style="customStyle" />
</template>

v-if를 통한 시트객체 생성 예제

Read More

Since