1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue & Wijmoのquickstartをやってみる。

Posted at

↓を参考にVue & Wijmoを試してみます。
Vue & Wijmoクイックスタート【2019年版】 

ミドルウェア バージョン
Mac OS X 10.15.4
nodebrew 1.0.1
npm 6.14.4
 npm install -g @vue/cli
 vue create quickstart
 cd quickstart
 npm install wijmo
vim src/App.vue 
<template>
  <div id="app">
    <wj-flex-grid :itemsSource="gridData">
      <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>
  </div>
</template>

<script>
import 'wijmo/wijmo.vue2.grid';
import 'wijmo/cultures/wijmo.culture.ja.js';
import 'wijmo/styles/wijmo.css';

export default {
  name: 'app',
  data: function () {
    return {
      gridData: [
        { id: 1, product: '商品1', date: '2020/05/11', amount: 100 },
        { id: 2, product: '商品2', date: '2020/05/11', amount: 1000 },
        { id: 3, product: '商品3', date: '2020/05/11', amount: 2000 },
        { id: 4, product: '商品4', date: '2020/05/11', amount: 15000 }
      ]
    }
  },
  components: {
  }
}
</script>
npm run serve
スクリーンショット 2020-05-11 23.47.22.png
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?