Spread.Sheets
Vue.jsの使用
Spread.Sheets > 開発者の手引き > JavaScriptフレームワークの使用 > Vue.jsの使用

Vue.jsの使用

Spread.Sheetsでは、JavaScriptライブラリの1つであるVue.jsがサポートされます。Vue.jsは、開発者に複雑なユーザーインターフェイスおよびWebアプリケーションを構築するためにツールを提供します。

Spread.Sheetsでは、次の2つの方法でVue.jsを使用できます。

  1. npm
  2. HTMLファイル

npm

  1. Vue.jsプロジェクトを作成する

    コマンドプロンプトウィンドウを開き、次のコマンドを入力します。

    npm install --global vue-cli
vue init webpack my-project
cd my-project

  2. Spread.Sheetsモジュールをインストールする

    Spread.Sheets Vue.jsモジュール、および日本語リソースを、npmからインストールします。

    npm install @grapecity/spread-sheets-vue

    npm install @grapecity/spread-sheets-resources-ja

  3. Vue.jsアプリでSpread.Sheetsを使用する

    src/App.vueファイルで、次のサンプルコードを使います。

    App.vue
    コードのコピー
    <template>
      <div>
        <gc-spread-sheets
          :hostClass='hostClass'>
          <gc-worksheet
            :dataSource="dataTable"
            :autoGenerateColumns='autoGenerateColumns'>
            <gc-column
              :width="width"
              :dataField="'price'"
              :visible='visible'
              :formatter='formatter'
              :resizable='resizable'>
            </gc-column>
          </gc-worksheet>
        </gc-spread-sheets>
      </div>
    </template>

    <script>
    import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css'
    import '@grapecity/spread-sheets-vue'
    import '@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js'
    export default {
      data () {
        return {
          hostClass: 'spread-host',
          autoGenerateColumns: true,
          width: 300,
          visible: true,
          resizable: true,
          formatter: '$ #.00'
        }
      },
      computed: {
        dataTable () {
          let dataTable = []
          for (let i = 0; i < 42; i++) {
            dataTable.push({price: i + 0.56})
          }
          return dataTable
        }
      }
    }
    </script>

    <style scoped>
    .spread-host {
      width: 500px;
      height: 600px;
    }
    </style>

  4. Vue.jsアプリを実行する

    次のコマンドで、アプリを実行します。

    npm run dev

HTMLファイル

  1. Vue.jsを参照する

    HTMLファイルに、Vue.js参照を追加します。

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  2. Spread.Sheetsを参照する

    HTMLファイルに、Spread.Sheets参照を追加します。

    <script src="scripts/gc.spread.sheets.all.xx.x.x.min.js" type="text/javascript"></script>
<script src="scripts/interop/vuejs/gc.spread.sheets.vue.xx.x.x.min.js" type="text/javascript"></script>
<script src="scripts/resources/ja/gc.spread.sheets.resources.ja.xx.x.x.min.js" type="text/javascript"></script>
<link href="css/gc.spread.sheets.excel2016colorful.xx.x.x.css" rel="stylesheet" type="text/css" />

  3. Vue.jsアプリでSpread.Sheetsを使用する

    例として、次のサンプルコードを使用します。

    HTMLファイル
    コードのコピー
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="spreadjs culture" content="ja-jp" />
        <title>Vue.jsの使用</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="scripts/gc.spread.sheets.all.xx.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/interop/vuejs/gc.spread.sheets.vue.xx.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/resources/ja/gc.spread.sheets.resources.ja.xx.x.x.min.js" type="text/javascript"></script>
        <link href="css/gc.spread.sheets.excel2016colorful.xx.x.x.css" rel='stylesheet" type="text/css" />
        <style>
          #app{
            width: 100%;
            height: 100%;
          }
          .vue-demo{
            width: 800px;
            height: 400px;
            margin: 0 auto;
          }
        </style>
      </head>
      <body>
        <div id="app">
          <app></app>
        </div>
        
        <script type="text/x-template" id="app-template">
          <div>
            <gc-spread-sheets v-bind:hostClass='hostClass' @workbookInitialized='spreadInitHandle'>
              <gc-worksheet>
              </gc-worksheet>
            </gc-spread-sheets>
          </div>
        </script>
        
        <script type="text/javascript">
          window.onload = function () {
            Vue.component('app', {
              template: '#app-template',
              data:function () {
                return {
                  hostClass: "vue-demo"
                }
              },
              methods: {
                spreadInitHandle: function (spread) {
                  window.mySpread = spread;
                }
              }
            });
            new Vue({
              el:"#app",
            })
          }
        </script>
        
      </body>
    </html>

タグ階層

<gc-spread-sheets>、<gc-worksheet>、および、<gc-column>は、タグ階層の基本要素です。他の要素は、それぞれ設定して使用します。

なお、タグ階層は、以下のとおりです。

<gc-spread-sheets>
  <gc-worksheet>
    <gc-column></gc-column>
    <gc-column></gc-column>
    <gc-column></gc-column>
    ...
  </gc-worksheet>
  ...
</gc-spread-sheets>

以下の各トピックでは、さまざまな要素（ディレクティブ）について説明します。

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.