[]
Vue.js3アプリケーションでは、次の手順でWijmoのコンポーネントを使用することができます。この手順ではFlexGridを利用します。
create-vueを利用して、Vue.jsアプリケーションを作成します。(プロジェクト名はwijmo-vue3とします。また、プロジェクト名以外のオプションはすべてデフォルトで設定しています。)
npm init vue@3
アプリケーションプロジェクトのフォルダに移動します。
cd wijmo-vue3
WijmoのVue.jsパッケージをインストールします。
npm install @mescius/wijmo.vue2.all
src/App.vueファイルを以下の通り変更します。各種設定はソースコード内のコメントをご参照ください。
<script setup>
import { ref } from 'vue'
//WjFlexGrid、WjFlexGridColumnコンポーネントをインポートします。
import { WjFlexGrid, WjFlexGridColumn } from '@mescius/wijmo.vue2.grid';
//日本語化カルチャをインポートします。
import '@mescius/wijmo.cultures/wijmo.culture.ja';
//グリッド用のデータを定義します。
const gridData = [
{ id: 15, product: 'ピュアデミグラスソース', date: '2022/10/19', amount: 6000 },
{ id: 17, product: 'だしこんぶ', date: '2022/10/19', amount: 14500 },
{ id: 18, product: 'ピリカラタバスコ', date: '2022/10/19', amount: 4000 },
{ id: 84, product: 'なまわさび', date: '2022/10/19', amount: 8000 }
]
const data = ref(getData())
</script>
<template>
<wj-flex-grid :itemsSource="data">
<wj-flex-grid-column header="ID" binding="id" :width="60"></wj-flex-grid-column>
<wj-flex-grid-column header="商品名" binding="product" :width="200"></wj-flex-grid-column>
<wj-flex-grid-column header="受注日" binding="date" :width="120"></wj-flex-grid-column>
<wj-flex-grid-column header="金額" binding="amount" :width="100" format="c"></wj-flex-grid-column>
</wj-flex-grid>
</template>
<style>
/* Wijmoのスタイルファイルをインポートします */
@import '@mescius/wijmo.styles/wijmo.css';
</style>
Vue.jsアプリを実行します。
npm run dev