SpreadJS 文档
JavaScript 框架 / 在Vue中使用SpreadJS
在本主题中
    在Vue中使用SpreadJS
    在本主题中

    SpreadJS支持Vue,这是一个JavaScript框架,可为开发人员提供独特的工具,以帮助他们构建复杂的用户界面和Web应用程序。

    SpreadJS可以通过以下两种方式与Vue一起使用:

    1. 使用Node包管理器
    2. 使用传统HTML

    使用Node包管理器

    此方法涉及以下步骤:

    1. 创建一个Vue项目

      打开命令提示符窗口并键入以下命令,以使用vue init webpack创建一个简单的Vue项目。

       $ npm install --global vue-cli

      # create a new project using the "webpack" template
      $ vue init webpack my-project

      # install dependencies and go!
      $ cd my-project
      $ npm run dev                    

      完成后,将在目录中的指定位置创建Vue项目。 有关如何创建Vue项目的更多信息,请参阅https://vuejs.org/v2/guide/installation.html

    2. 在项目中导入SpreadJS Vue模块

      接下来,您需要使用以下命令在项目中安装 @grapecity/spread-sheets-vue:

      $ npm install @grapecity/spread-sheets-vue
             
    3. 在Vue应用程序中使用SpreadJS

      现在,您可以根据需要修改App.vue文件。 刷新浏览器窗口时,变更将反映出来。 例如,您可以使用下面给出的示例代码:

      JavaScript
      复制代码
      <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.excel2016colorful.css'
      import  '@grapecity/spread-sheets-vue'
      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>
      

    使用传统HTML

    此方法涉及以下步骤:

    1. 创建HTML页面

      第一步,您需要创建一个HTML页面。

    2. 将SpreadJS和Vue-SpreadJS添加到HTML模板

      添加引用 gc.spread.sheets.all.*.*.*.min.js,  gc.SpreadJS.*.*.*.css and  gc.spread.sheets.vue.*.*.*.js 文件到 HTML 模板 (i.e. 你的 index.html 文件)。

    3. 在Vue应用程序中使用SpreadJS

      现在,您可以在Vue应用程序中使用SpreadJS。 例如,您可以使用下面给出的示例代码:

      JavaScript
      复制代码
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>Hello SpreadJS Vue</title>
          <link rel="stylesheet" href="lib/gc.spread.sheets.excel2016colorful.0.0.0.css" 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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="lib/gc.spread.sheets.all.0.0.0.js"></script>
      <script src="lib/gc.spread.sheets.vue.js"></script>
      <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;
                      console.log('now you can also get spread from window');
                  }
              }
          });
          new Vue({
              el:"#app",
          })
      }
      </script>
      </body>
      </html>         
                    
      

    SpreadSheets,Worksheet和Column是具有标签层次结构的基本元素。 其他元素通过设置来起作用。 主要标签层次为:

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

    以下主题列出了标签指令。