SpreadJS 文档
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>

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