这是一个创建于 2072 天前的主题，其中的信息可能已经有所发展或是发生改变。
纯前端表格控件 SpreadJS 目前已经全面支持 Vue -- 一个 JavaScript 框架，为开发人员提供不同的工具，以帮助他们构建复杂的用户界面和 Web 应用程序。
SpreadJS 可以通过以下两种方式与 Vue 一起使用：
使用 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 数据开发，备受华为、海信、立信、中国平安、中国能建、中通快递、金麒麟和北京神软等客户青睐。
目前尚无回复
Select Language