最近因工作需要正在學(xué)習(xí)spreadJs，spreadJs是一款基于 HTML5 的純 JavaScript 電子表格和網(wǎng)格功能控件，以“高速低耗、純前端、零依賴、可嵌入任何操作系統(tǒng)”為產(chǎn)品特色，同時(shí)滿足 .NET、Java、響應(yīng)式 Web 應(yīng)用及移動(dòng)跨平臺的表格數(shù)據(jù)處理和類 Excel 的表格應(yīng)用開發(fā)，為用戶提供更快捷、更安全、更熟悉的表格數(shù)據(jù)處理方式和更友好的類 Excel 操作體驗(yàn)。

項(xiàng)目框架是基于vue的vue-element-admin，spreadJs可以通過以下兩種方式與Vue一起使用：

1. 使用Nuget Package Manager(NPM)
2. 使用傳統(tǒng)HTML
   在這里我使用的是第一種方式，話不多說，上干貨。

1. 通過npm install 或者在package.json中添加引用的方式安裝spread.sheets

我是用npm install方法進(jìn)行包安裝，獲取的版本是12.0.9
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-vue

2. 獲取到完整包后，項(xiàng)目直接運(yùn)行npm run dev

在執(zhí)行過程中，有可能會(huì)遇到下面的報(bào)錯(cuò)信息
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解決方案：在webopack增加如下配置

resolve: {
    alias: {
        vue: 'vue/dist/vue.js'
    }
}

3. 新建vue文件

template部分

<template>
  <div class="app-container">
      <gc-spread-sheets
            hostClass='spread-host'
            @workbookInitialized = 'workbookInitialized($event)'>
        <gc-worksheet :data-source="tableData" :auto-generate-columns="autoGenerateColumns">
        </gc-worksheet>
      </gc-spread-sheets>
  </div>
</template>

style部分

<style scoped>
  .spread-host {
    width: 100%;
    height: 800px
  }
</style>

javascript部分

<script>
  import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
  import GC from '@grapecity/spread-sheets'
  import '@grapecity/spread-sheets-vue'
  export default {
    data() {
      return {
        // 表格的數(shù)據(jù)源
        tableData: []
      }
    },  
    // 初始化表格數(shù)據(jù)
    created() {
      this.tableData = [
        ['1', 'TOM'],
        ['2', 'JACK'],
        ['3', 'JAMES']
      ]
    },
    methods: {
      // workbookInitialized是spread初始化完成后的回調(diào)事件，我們可以在事件中得到初始化好的workbook對象
      workbookInitialized(spread) {
        this.spread = spread
        this.sheetsFilter()
        spread.refresh()
      }
    }
  }
</script>

至此，spreadJs的表格已搭建完成，可在瀏覽器中查看效果，后面我會(huì)接著介紹表格的應(yīng)用。