SpreadJS控件Vue入门介绍

通过执行以下简单步骤,将类似于Excel的电子表格嵌入到Vue应用程序中。之后,可以根据您的业务需要对其进行自定义。

步骤

  1. 创建一个Vue应用程序 - 通过使用 Vue脚手架创建一个新的Vue应用程序。 在命令行或终端运行以下命令,使用默认选项创建Vue应用程序。更多细节请参考Vue官网。
    vue create -p default sjs-vue-app
    cd sjs-vue-app
  2. 安装SpreadJS npm包 - 我们通过使用 @grapecity/spread-sheets-vue 来分发Vue SpreadJS 控件. 最主要的@grapecity/spread-sheets 包是功能模块核心。在应用程序根目录运行下列命令来安装这些包最新的版本。
    npm install @grapecity/spread-sheets-vue @grapecity/spread-sheets
    //or if you are using yarn
    yarn add @grapecity/spread-sheets-vue @grapecity/spread-sheets
  3. 在应用程序内添加SpreadJS Vue控件/初始化SpreadJS电子表格 - 打开src\App.vue并用下列代码替换文件内容。
    <template>
      <div>
        <gc-spread-sheets
          :hostClass="hostClass"
          @workbookInitialized="initWorkbook"
        >
        </gc-spread-sheets>
      </div>
    </template>
    
    <script>
    import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
    import * as GC from "@grapecity/spread-sheets";
    import "@grapecity/spread-sheets-vue";
    
    export default {
      name: "App",
      data() {
        return {
          hostClass: "spread-host",
        };
      },
      methods: {
        initWorkbook: function (spread) {
          //initializing
          let worksheet = spread.getActiveSheet();
        },
      },
    };
    </script>
    
    <style>
    .spread-host {
      width: 100%;
      height: 600px;
    }
    </style>

设置值和公式

步骤

  1. 使用 setValue 方法来给指定单元格设置值,使用 setFormula 方法来设置计算公式。
    initWorkbook: function (spread) {
      let sheet = spread.getActiveSheet();
      //Setting Values - Text
      sheet.setValue(1, 1, "Setting Values");
      //Setting Values - Number
      sheet.setValue(2, 1, "Number");
      sheet.setValue(2, 2, 23);
      sheet.setValue(3, 1, "Text");
      sheet.setValue(3, 2, "GrapeCity");
      sheet.setValue(4, 1, "Datetime");
      //Setting Values - DateTime
      sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("mm-dd-yyyy");
    }

设置样式

使用以下功能,为您的数据提供更有价值和更吸引人的外观。

步骤

  1. 在这一步,设置样式使得数据更具吸引力、更规范。

    initWorkbook: function (spread) {
       /initialize the spread
       let sheet = spread.getActiveSheet();
       //Setting Values - Text
       sheet.setValue(1, 1, "Setting Values");
       //Setting Values - Number 
       sheet.setValue(2, 1, "Number");
       sheet.setValue(2, 2, 23)
       sheet.setValue(3, 1, "Text");
       sheet.setValue(3, 2, "GrapeCity")
       sheet.setValue(4, 1, "Datetime");
       //Setting Values - DateTime
       sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("mm-dd-yyyy");
       //Setting style
       sheet.setColumnWidth(1, 200);
       sheet.setColumnWidth(2, 200);
       sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
       sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
       sheet.addSpan(1, 1, 1, 2);
       sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
         all: true
       });
       sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
         inside: true
       });
       sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    }

绑定数据

探索如何轻松地绑定数据。

步骤

  1. 使用 getSheet 方法来获取您正在使用的表单。通过使用 "new GC.Spread.Sheets.Bindings.CellBindingSource(person);" 来添加单元格需要绑定的数据源。 之后使用 setBindingPath 方法来给指定表单区域的指定单元格绑定数据。最后使用setDataSource方法来给指定表单添加数据源。
    initWorkbook: function (spread) {
       var sheet = spread.getSheet(0);
       var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
       var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
       sheet.setBindingPath(2, 2, 'name');
       sheet.setBindingPath(3, 2, 'age');
       sheet.setBindingPath(4, 2, 'gender');
       sheet.setBindingPath(5, 2, 'address.postcode');
       sheet.setDataSource(source);
    }