在 Vue 中使用 SpreadJS

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

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

使用Node包管理器

此方法涉及以下步骤：

创建一个Vue项目
打开命令提示符窗口并键入以下命令，以使用vue init webpack创建一个简单的Vue项目。
完成后，将在目录中的指定位置创建Vue项目。有关如何创建Vue项目的更多信息，请参阅https://vuejs.org/v2/guide/installation.html。
在项目中导入SpreadJS Vue模块
接下来，您需要使用以下命令在项目中安装 @grapecity-software/spread-sheets-vue：
在Vue应用程序中使用SpreadJS
现在，您可以根据需要修改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-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import  '@grapecity-software/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

此方法涉及以下步骤：

创建HTML页面
第一步，您需要创建一个HTML页面。
将SpreadJS和Vue-SpreadJS添加到HTML模板
添加引用 gc.spread.sheets.all....min.js, gc.SpreadJS....css and gc.spread.sheets.vue...*.js 文件到 HTML 模板 (i.e. 你的 index.html 文件)。
在Vue应用程序中使用SpreadJS
现在，您可以在Vue应用程序中使用SpreadJS。例如，您可以使用下面给出的示例代码：

<!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>

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