그리드 필드 및 컬럼 생성하기
RGDataColumn 컴포넌트를 사용하여 컬럼을 생성합니다.
컬럼 및 필드 생성시에는 반드시 field-name이 선언 되어야 하며, 필요에 따라 field-name 이외의 속성들을 설정하실 수 있습니다.
다음과 같이 직접 필드 생성 하실 수 있으며 auto-generate-field 속성으로 필드가 자동으로 생성되도록 설정하실 수 있습니다.
// RealGrid.vue
// auto-generate-field = false 인 경우
<template>
<div style="width: 1000px; height: 400px">
<RealGridVue
ref="gridRef"
:auto-generate-field="false">
<RGDataField field-name="field1"></RGDataField>
<RGDataField field-name="field2"></RGDataField>
<RGDataColumn field-name="field1" :width="100" key="field1"></RGDataColumn>
<RGDataColumn field-name="field2" :width="100" key="field2"></RGDataColumn>
</RealGridVue>
</div>
</template>
// auto-generate-field = true 인 경우
<template>
<div style="width: 1000px; height: 400px">
<RealGridVue
ref="gridRef"
:auto-generate-field="true">
<RGDataColumn field-name="field1" :width="100" key="field1"></RGDataColumn>
<RGDataColumn field-name="field2" :width="100" key="field2"></RGDataColumn>
</RealGridVue>
</div>
</template>
<script setup lang="ts">
import RealGrid from "realgrid";
import { RealGridVue, RGDataColumn, RGDataField } from "realgrid-vue";
import { ref } from "vue";
const gridRef = ref<RealGridVue>();
</script>컬럼 및 필드 생성 시 아래 이미지와 같이 컬럼이 추가된 것을 확인 할 수 있습니다.
