最近因工作需要正在學習spreadJs殊鞭，spreadJs是一款基于 HTML5 的純 JavaScript 電子表格和網格功能控件，以“高速低耗尼桶、純前端操灿、零依賴、可嵌入任何操作系統(tǒng)”為產品特色泵督，同時滿足 .NET趾盐、Java、響應式 Web 應用及移動跨平臺的表格數(shù)據(jù)處理和類 Excel 的表格應用開發(fā)，為用戶提供更快捷救鲤、更安全久窟、更熟悉的表格數(shù)據(jù)處理方式和更友好的類 Excel 操作體驗。
項目框架是基于vue的vue-element-admin本缠，spreadJs可以通過以下兩種方式與Vue一起使用：
- 使用Nuget Package Manager(NPM)
- 使用傳統(tǒng)HTML
在這里我使用的是第一種方式斥扛，話不多說，上干貨丹锹。
1. 通過npm install 或者在package.json中添加引用的方式安裝spread.sheets
我是用npm install方法進行包安裝稀颁，獲取的版本是12.0.9
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-vue
2. 獲取到完整包后，項目直接運行npm run dev
在執(zhí)行過程中楣黍，有可能會遇到下面的報錯信息
[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初始化完成后的回調事件匾灶，我們可以在事件中得到初始化好的workbook對象
workbookInitialized(spread) {
this.spread = spread
this.sheetsFilter()
spread.refresh()
}
}
}
</script>
至此，spreadJs的表格已搭建完成租漂，可在瀏覽器中查看效果阶女，后面我會接著介紹表格的應用。
