vue 에서 paging 적용 예제 부탁 드립니다.

[kimjungyeol]

vue 에서 paging 적용 예제 부탁 드립니다.

속성 정보를 어떻게 넣어야 되는지 모르겠네요.

찾아봐도 제대로 된 예제가 없네요 ㅜㅜ

[dongwoo-kim]

안녕하세요. 답변이 늦어 죄송합니다. 제가 찾아봐도 제대로 된 예제가 없네요.. 빠른 시일 내에 문서를 보완하도록 하겠습니다.

우선 pagination 옵션을 지정하고, tui-pagination 모듈의 CSS를 import 해야합니다.
그리고 페이지네이션은 현재 서버 데이터와 연동했을 경우에만 사용 가능해서, Net 애드온을 함께 사용해야만 합니다. 관련 설정은 튜토리얼을 참고하시면 될 것 같습니다. Vue 랩퍼에서는 mounted() 훅에서 invoke를 통해 사용할 수 있습니다.

아래 코드 참고 부탁드립니다.

<template>
  <grid ref="tuiGrid" :rowData="rows" :columnData="columns" :options="options"/>
</template>

import Vue from 'vue';
import { Grid } from '@toast-ui/vue-grid';
import 'tui-grid/dist/tui-grid.css';
import 'tui-pagination/dist/tui-pagination.css';

export default Vue.extend({
  name: 'App',
  components: {
    grid: Grid
  },
  mounted() {
    this.$refs.tuiGrid.invoke('use', 'Net', {
      perPage: 10,
      api: { readData: 'api/readData' }
    });
  },
  data() {
    return {
      columns: [/* column settings.. */]
    };
  }
});