欧美九九热,伦理片a在线线2,国产自在自拍

電子表格控件教程：如何在 Vue 中使用 SpreadJS

翻譯|使用教程|編輯：鮑佳佳|2020-09-28 10:00:56.993|閱讀 592 次

概述：spreadJS可以通過兩種方式與VUE一起使用，一是使用節(jié)點(diǎn)包管理器；二是使用傳統(tǒng)HTML，本文將針對(duì)這兩種方式做詳細(xì)的說明。并提供完整示例以便讀者理解。

相關(guān)鏈接：

SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業(yè)用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗(yàn)的同時(shí)，滿足 Web Excel 組件開發(fā)、表格文檔協(xié)同編輯、數(shù)據(jù)填報(bào)、Excel 類報(bào)表設(shè)計(jì)等業(yè)務(wù)場(chǎng)景，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。更多詳情信息文章教程點(diǎn)擊這里>>

點(diǎn)擊下載SpreadJS最新試用版

SpreadJS支持Vue----一個(gè)JavaScript框架，該框架為開發(fā)人員提供了不同的工具，以幫助他們構(gòu)建復(fù)雜的用戶界面和Web應(yīng)用程序。

SpreadJS可以通過以下兩種方式與Vue一起使用：

使用節(jié)點(diǎn)包管理器
使用傳統(tǒng)HTML

使用節(jié)點(diǎn)包管理器

此方法涉及以下步驟：

創(chuàng)建一個(gè)Vue項(xiàng)目
打開命令提示符窗口，然后鍵入以下命令，以使用vue init webpack創(chuàng)建一個(gè)簡(jiǎn)單的Vue項(xiàng)目。

$ 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

完成后，將在目錄中的指定位置創(chuàng)建Vue項(xiàng)目。
在項(xiàng)目中導(dǎo)入SpreadJS Vue模塊
接下來，您需要使用以下命令在項(xiàng)目中安裝@ grapecity / spread-sheets-vue：
$ npm install @grapecity/spread-sheets-vue

在Vue應(yīng)用程序中使用SpreadJS
現(xiàn)在，您可以根據(jù)需要修改App.vue文件。刷新瀏覽器窗口時(shí)，更改將反映出來。例如，您可以使用下面給出的示例代碼：

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

使用傳統(tǒng)HTML

此方法涉及以下步驟：

創(chuàng)建一個(gè)HTML頁面
第一步，您需要?jiǎng)?chuàng)建一個(gè)HTML頁面。
將SpreadJS和Vue-SpreadJS添加到HTML模板
在HTML模板中（即您的index.html文件）添加對(duì)gc.spread.sheets.all.*.*.*.min.js, gc.SpreadJS.*.*.*.css and gc.spread.sheets.vue.*.*.*.js 文件的引用。
在Vue應(yīng)用程序中使用SpreadJS
現(xiàn)在，您可以在Vue應(yīng)用程序中使用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="http://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>

SpreadSheets，Worksheet和Column是具有標(biāo)簽層次結(jié)構(gòu)的基本元素。其他元素通過設(shè)置來起作用。主要標(biāo)簽層次為：

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

今天的內(nèi)容就到這了，不要忘了在評(píng)論區(qū)留下的意見和建議！現(xiàn)電子表格控件SpreadJS正版授權(quán)限時(shí)優(yōu)惠！低至3490；企業(yè)版最高立減6000元。點(diǎn)擊了解更多優(yōu)惠！