7.3 Vue에서 사용하기
Vue 3 JavaScript와 TypeScript의 script setup 예제입니다.
제품 파일 준비는 공통 안내를 참고하십시오.
예제 파일을 src/samples/에 둘 때의 상대 import 경로를 사용하므로 별도의 @ 별칭은 필요하지 않습니다.
7.3.1 JavaScript로 그리드 생성하기
AUIGrid.vue를 import하고 :columnLayout과 :gridProps로 설정을 전달합니다.
숫자, Boolean, 배열 및 객체를 전달할 때에는 : 바인딩을 사용하십시오.
<script setup>
import { ref, onMounted } from 'vue';
import AUIGrid from '../static/AUIGrid-Vue.js/AUIGrid.vue';
const gridRef = ref(null);
const columns = [
{ dataField: 'name', headerText: '품목', width: 200 },
{ dataField: 'quantity', headerText: '수량', dataType: 'numeric' }
];
const props = { width: '100%', height: 360, editable: true };
const onCellClick = (event) => console.log(event.value);
// 자식 래퍼가 생성한 그리드에 데이터를 설정합니다.
onMounted(() => {
gridRef.value?.setGridData([
{ name: '모니터', quantity: 12 },
{ name: '키보드', quantity: 30 }
]);
});
</script>
<template>
<AUIGrid ref="gridRef" :columnLayout="columns" :gridProps="props"
@cellClick="onCellClick" />
</template>7.3.2 TypeScript로 그리드 생성하기
TypeScript에서는 AUIGridT.vue를 사용합니다.
InstanceType<typeof AUIGrid>로 컴포넌트 인스턴스를 지정하고,
IGrid.Props, IGrid.Column, IGrid.CellClickEvent로 엔진 설정과 이벤트를 작성합니다.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as IGrid from 'aui-grid';
import AUIGrid from '../static/AUIGrid-Vue/AUIGridT.vue';
type GridInstance = InstanceType<typeof AUIGrid>;
const gridRef = ref<GridInstance | null>(null);
const columns: IGrid.Column[] = [
{ dataField: 'name', headerText: '품목', width: 200 },
{ dataField: 'quantity', headerText: '수량', dataType: 'numeric' }
];
const props: IGrid.Props = { width: '100%', height: 360, editable: true };
const onCellClick = (event: IGrid.CellClickEvent) => console.log(event.value);
// waitPortalRendering의 기본값 false를 사용하는 초기 데이터 설정입니다.
onMounted(() => {
gridRef.value?.setGridData([
{ name: '모니터', quantity: 12 },
{ name: '키보드', quantity: 30 }
]);
});
</script>
<template>
<AUIGrid ref="gridRef" :columnLayout="columns" :gridProps="props"
@cellClick="onCellClick" />
</template>7.3.3 메서드와 이벤트 사용하기
래퍼가 그리드 ID를 전달하므로 ref.value의 메서드에는 ID를 다시 넣지 않습니다.
gridRef.value?.addRow({ name: '마우스', quantity: 5 }, 'last');
gridRef.value?.setGridData(rows);
gridRef.value?.resize();@cellClick처럼 이벤트를 템플릿에 선언합니다.
cellEditBegin 등 반환값이 필요한 이벤트는 하나의 함수로 연결하고 해당 함수에서 값을 반환합니다.
<!-- 기존 AUIGrid 태그에 이벤트를 함께 지정합니다. -->
<AUIGrid ref="gridRef" :columnLayout="columns" :gridProps="props"
@cellClick="onCellClick" @cellEditBegin="onCellEditBegin" />// script setup 내부에 정의합니다. 품목 이름의 편집 시작을 막습니다.
const onCellEditBegin = (event) => event.dataField !== 'name';TypeScript에서는 매개변수에 IGrid.CellEditBeginEvent를 지정할 수 있습니다.
반환값은 각 이벤트의 API 설명을 따릅니다.
템플릿 이벤트의 연결 여부는 그리드 생성 시 확인합니다. 생성 당시 없던 이벤트를 나중에 추가해야 한다면
gridRef.value.bind('cellClick', handler)와 unbind('cellClick')로 명시적으로 관리하십시오.
같은 이벤트를 템플릿과 bind() 양쪽에서 중복 등록하지 않습니다.
7.3.4 생명주기와 캐시된 화면
기본 생성은 래퍼의 mounted에서, 최종 파괴는 Vue 3의 beforeUnmount에서 처리합니다.
부모는 최초 마운트 시 create()를 중복 호출하거나 동일 그리드를 다시 파괴할 필요가 없습니다.
- 엔진 데이터는
setGridData(), 칼럼은changeColumnLayout(), 실행 중 변경 가능한 속성은setProp()으로 갱신합니다. Vue 반응형 객체의 값을 바꾼 것만으로 생성 시 전달한 설정이 자동 적용되는 것은 아닙니다. - 비동기 데이터 요청은 컴포넌트 해제 후 응답이 그리드에 적용되지 않도록 취소 또는 무효화합니다.
KeepAlive에서 캐시된 동안 응답을 적용할지는 애플리케이션 정책에 맞춰 별도로 관리하십시오. - 래퍼 1.7의
resizeMode="container":deactivated에서 관찰과 예약된 크기 조정을 중단하고activated에서 다시 연결합니다. 그리드를 재생성하지 않아 기존 편집 데이터와 화면 상태를 유지합니다. - 직접
resize()를 호출할 때에는 캐시된 DOM이 문서에 복귀한 뒤 호출합니다.isCreated()가 true여도 부모 DOM이 아직 분리된 상태일 수 있습니다.Transition을 함께 사용하면nextTick()만으로 전환 완료를 보장할 수 없으므로 전환 완료 시점도 확인하십시오. waitPortalRendering은 Vue TypeScript 래퍼에서 지원합니다. true이면 생성이 다음 프레임으로 미뤄지므로 부모의onMounted에서 곧바로 데이터를 설정하는 위 예제의 순서도 조정해야 합니다. Vue JavaScript 래퍼에는 이 속성이 없습니다.
서버 렌더링 환경에서는 제품 파일의 로딩과 그리드 생성을 클라이언트 영역에 둡니다.
고유한 name을 지정하는 것만으로 서버 측 렌더링이 지원되는 것은 아닙니다.