9.3 Vue에서 사용하기

Vue 3의 script setup에서 템플릿 ref로 서브 컴포넌트를 참조하고, onMounted에서 초기화합니다.

9.3.1 JavaScript 예제

파일 준비를 마친 샘플 프로젝트에서 사용할 수 있는 예제입니다. 아래 파일은 src/samples/Report.vue에 둔다고 가정합니다. 샘플에 포함된 public/data/car_sales.json을 읽으며, 실제 배치 위치에 맞춰 경로를 바꾸십시오.

예제는 createOnMounted=false로 자동 생성을 끄고 init()에서 createPivotGrid()를 호출해 한 번 생성합니다. 행은 지점과 차종, 열은 색상, 값은 매출 합계입니다. requestData()에서 자료를 읽은 후 setGridData()로 집계합니다.

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import AUIPivot from '../static/AUIPivot-Vue/AUIPivot.vue';
const pivotProps = { height: 400 };
const myPivot = ref(null);
let disposed = false;
// 시작점에서 피벗을 생성한 뒤 자동차 자료를 읽습니다.
function init() {
    createPivotGrid();
    requestData(`${import.meta.env.BASE_URL}data/car_sales.json`);
}
function createPivotGrid() {
    const pivot = myPivot.value;
    if (!pivot) return;
    pivot.create(pivotProps);
    pivot.setRowFields(['REGION', 'NAME']);
    pivot.setColumnFields(['COLOR']);
    pivot.setValueFields([{ dataField: 'TOTAL', operation: 'SUM' }]);
    pivot.bind('pivotComplete', event => console.log(event.type));
}
// 요청 도중 화면이 해제되면 결과를 사용하지 않습니다.
function requestData(url) {
    return fetch(url).then(response => {
        if (!response.ok) throw new Error('자료 요청 실패');
        return response.json();
    }).then(data => {
        const pivot = myPivot.value;
        if (!disposed && pivot?.isCreated()) pivot.setGridData(data);
    }).catch(error => { if (!disposed) console.error(error); });
}
onMounted(init);
onBeforeUnmount(() => { disposed = true; });
</script>
<template>
    <AUIPivot ref="myPivot" :createOnMounted="false"
        resizeMode="container" :resizeDelayTime="100" />
</template>

9.3.2 TypeScript 예제

lang="ts"를 지정하고 TypeScript용 AUIPivotT.vue를 가져옵니다. 엔진 속성은 IPivot.Props, 컴포넌트 참조는 InstanceType<typeof AUIPivot>으로 지정합니다.

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import AUIPivot from '../static/AUIPivot-Vue/AUIPivotT.vue';
import type * as IPivot from 'aui-pivot';
const pivotProps: IPivot.Props = { height: 400 };
const myPivot = ref<InstanceType<typeof AUIPivot> | null>(null);
let disposed = false;
// 시작점에서 피벗을 생성한 뒤 자동차 자료를 읽습니다.
function init() {
    createPivotGrid();
    requestData(`${import.meta.env.BASE_URL}data/car_sales.json`);
}
function createPivotGrid() {
    const pivot = myPivot.value;
    if (!pivot) return;
    pivot.create(pivotProps);
    pivot.setRowFields(['REGION', 'NAME']);
    pivot.setColumnFields(['COLOR']);
    pivot.setValueFields([{ dataField: 'TOTAL', operation: 'SUM' }]);
    pivot.bind('pivotComplete', event => console.log(event.type));
}
// 요청 도중 화면이 해제되면 결과를 사용하지 않습니다.
function requestData(url: string) {
    return fetch(url).then(response => {
        if (!response.ok) throw new Error('자료 요청 실패');
        return response.json();
    }).then(data => {
        const pivot = myPivot.value;
        if (!disposed && pivot?.isCreated()) pivot.setGridData(data);
    }).catch(error => { if (!disposed) console.error(error); });
}
onMounted(init);
onBeforeUnmount(() => { disposed = true; });
</script>
<template>
    <AUIPivot ref="myPivot" :createOnMounted="false"
        resizeMode="container" :resizeDelayTime="100" />
</template>

9.3.3 메소드 호출과 이벤트

myPivot.value의 메소드는 피벗 ID를 자동으로 전달합니다. myPivot.value?.setGridData(data)처럼 ID를 제외하고 호출하십시오.

템플릿 이벤트는 피벗 생성 시 연결됩니다. 다음 코드는 위 예제에 셀 클릭 처리를 추가하는 부분입니다.

<!-- 기존 AUIPivot 태그에 셀 클릭 처리기를 연결합니다. -->
<AUIPivot ref="myPivot" :createOnMounted="false" @cellClick="onCellClick" />

<script setup lang="ts">
import type { CellClickEvent } from 'aui-pivot';
// 기존 script setup 블록에 추가합니다.
function onCellClick(event: CellClickEvent) {
    console.log(event.value);
}
</script>

같은 이벤트를 템플릿과 bind() 양쪽에 중복 등록하지 마십시오. 생성 후 새로 등록할 때는 myPivot.value?.bind('cellClick', handler)를 사용하고, 선택적으로 해제할 때는 동일한 함수 참조를 unbind('cellClick', handler)에 전달합니다.

pivotBegin, headerClick, contextMenu는 처리기의 반환값을 사용합니다. 템플릿에 함수 하나를 연결하고 그 함수에서 값을 직접 반환하십시오. 각 이벤트의 취소 및 반환 규칙은 API 문서를 따릅니다.

9.3.4 생성과 해제 시점

createOnMounted의 기본값은 true입니다. 자동 생성 시에는 :pivotProps="pivotProps"를 전달하고, 부모의 onMounted에서 필드와 데이터를 설정합니다. 이 경우 create()를 다시 호출하지 않습니다.
컴포넌트가 해제되면 피벗과 크기 감지 작업도 정리됩니다. 예제는 onBeforeUnmount에서 요청 결과의 적용도 중지합니다.
Vue의 반응형 pivotProps를 바꾸는 것만으로 생성된 피벗이 갱신되지는 않습니다. setProp()와 refresh() 등 해당 API를 사용합니다.

KeepAlive와 resizeMode="container"를 함께 쓰면 비활성화 중에는 크기 관찰을 멈추고, 다시 활성화될 때 관찰을 재개합니다. 피벗과 기존 데이터는 유지됩니다. window 모드에서는 창 크기가 바뀌지 않은 탭 전환을 자동 감지하지 않으므로 표시 후 resize()를 호출하십시오.

v-if로 만든 영역은 nextTick() 이후 실제 DOM이 연결되어 있는지 확인합니다. 전환 효과가 있다면 표시 전환이 끝난 시점에 resize()를 호출하십시오. nextTick()만으로 애니메이션 완료가 보장되지는 않습니다.

Vue 컴포넌트에는 waitPortalRendering 속성이 없습니다. 서버 렌더링 환경에서는 엔진과 컴포넌트를 클라이언트에서만 불러오고, DOM이 준비된 뒤 생성하십시오. 자세한 크기 설정은 크기 감지와 표시 시점을 참고하십시오.

문서 홈으로 돌아가기