概述

VUE

纯前端表格控件 SpreadJS 目前已经全面支持Vue -- 一个JavaScript框架，为开发人员提供不同的工具，以帮助他们构建复杂的用户界面和Web应用程序。

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

  1. 使用Nuget Package Manager(NPM)

  2. 使用传统HTML

使用Nuget Package Manager(NPM)

此方法包括以下步骤：

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文件。刷新浏览器窗口时将反映更改。例如，您可以使用下面给出的示例代码：

<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-Spread.Sheets添加到HTML模板

添加对gc.spread.sheets.all。*。*。*。min.js，gc.spread.sheets。*。*。*。css和gc.spread.sheets.vue。*。*。*的引用。 HTML模板中的js文件（即index.html文件）。

3、 在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>

SpreadJS 中的 SpreadSheets，Worksheet和Column是具有标记层次结构的基本元素。其他元素通过设置它们来工作。主标记层次结构是：

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

SpreadJS | 下载试用

纯前端表格控件SpreadJS，是市面上布局与功能都与 Excel 高度类似的一款表格控件，全中文操作界面，适用于.NET、Java、移动端等多个平台的类 Excel 数据开发，备受华为、海信、立信、中国平安、中国能建、中通快递、金麒麟和北京神软等客户青睐。

您对SpreadJS产品的任何技术问题，都有技术支持工程师提供1对1专业解答，点击此处即可发帖提问>>技术支持论坛