在Vue3中使用SpreadJS常见问题总结

收藏

本帖最后由 Ellia.Duan 于 2022-12-7 15:12 编辑

在开始本篇文章之前，如果对Vue3不太熟悉，可以先看下Vue3新版本特性。熟悉Vue3之后，就可以开始使用啦!

1. 在vue3中怎么使用 gc-spread-sheets-designer 组件

https://gcdn.grapecity.com.cn/showtopic-148170-1-1.html

2. 在Vue3中使用dom元素加载Designer组件。

<template>
<div id="ssDesigner" style="height: 100vh;width: 100%;">
</template>
<script>
import ...
export default {
name: "App",
mounted() {
this.init();
},
methods: {
init() {
let designer = new GC.Spread.Sheets.Designer.Designer('ssDesigner');
let spread = designer.getWorkbook();
let sheet = spread.getActiveSheet();
sheet.setValue(0,0,'hello ,SpreadJS');
this.designer = designer;
}
}
}
</script>

复制代码

3. 在Vue3中addSheet出现了白屏问题。

出错代码：

<template>
<gc-spread-sheets class="spreadHost" @workbookInitialized="initSpread">
</gc-spread-sheets>
</template>
<script>
import ...
export default {
name: "App",
methods: {
initSpread(v){
this.spread = v;
}
addSheet(){ this.spread.addSheet()}
}
}

复制代码

出现此问题的原因是将spread实例挂载当前的this上，导致spread实例被自动代理，
出现了一些异常。
所以不建议将spread直接挂载到当前的this，您可以参考以下代码解决：

initSpread(spread) {
this.spread = spread.getHost();
},
addSheet() {
var sheet = new GC.Spread.Sheets.Worksheet('New Sheet');
var spreadReal = GC.Spread.Sheets.findControl(this.spread);
spreadReal.addSheet(1,sheet);
}

复制代码

4. 在Vue3+vite+ts ，项目部署到生产机后，Designer组件不显示。可以参考下面两篇帖子，出错原因是与vite版本兼容问题，

https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=155195&fromuid=73514

https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=154855
https://gcdn.grapecity.com.cn/fo ... amp;extra=page%3D10

5. 在Vue3中，fromJSON写入的页面，sheet单元格写内容，双击后才会显示；在Vue3中，鼠标在sheet页点或者滚动下拉条才会出现数据；在Vue3中，同样的代码div id的designer设计器比gc-spread-sheets加载数据慢，是为什么？出现这三种问题是使用了如下的代码：

<template>
<div id="gc-designer-container">
<gc-spread-sheets-designer
:styleInfo="styleInfo"
:config="config"-->
:spreadOptions="spreadOptions"
@designerInitialized="designerInitialized"/>
</div>
</template>
<script>
import ...
export default {
methods: {
designerInitialized(value) {
this.designer = value;
this.spread = this.spread.getWorkbook();
this.spread.fromJSON(json);
}
}
}
</script>

复制代码

出错原因是：不应该将复杂的 javascript 对象缓存到全局 vue3 变量，vue3 将使用代理包装该对象，这将破坏 javascript 对象的生命周期。

可以参考如下代码解决：

<template>
<div id="gc-designer-container">
<gc-spread-sheets-designer
:styleInfo="styleInfo"
:config="config"-->
:spreadOptions="spreadOptions"
@designerInitialized="designerInitialized"/>
</div>
</template>
<script>
import ...
export default {
methods: {
designerInitialized(designer) {
this.designer = designer;
let spread = designer.getWorkbook();
spread.fromJSON(json);
}
}
}
</script>

复制代码

		自动登录	找回密码
密码			立即注册

在Vue3中使用SpreadJS常见问题总结

0 个回复

SpreadJS 认证

SpreadJS 高级认证