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

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

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

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

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

1. <template>
   
2.     <div id="ssDesigner" style="height: 100vh;width: 100%;">
   
3. </template>
   
4. <script>
   
5. import ...
   
6. 
   
7. export default {
   
8.     name: "App",
   
9.     mounted() {
   
10.         this.init();
    
11.     },
    
12.     methods: {
    
13.         init() {
    
14.             let designer = new GC.Spread.Sheets.Designer.Designer('ssDesigner');
    
15.             let spread = designer.getWorkbook();
    
16.             let sheet = spread.getActiveSheet();
    
17.             sheet.setValue(0,0,'hello ,SpreadJS');
    
18.             this.designer = designer;
    
19.         }
    
20.     }
    
21. }
    
22. </script>

复制代码

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

出错代码：

1. <template>
   
2.    <gc-spread-sheets class="spreadHost" @workbookInitialized="initSpread">
   
3.     </gc-spread-sheets>
   
4. </template>
   
5. <script>
   
6. import ...
   
7. 
   
8. export default {
   
9.    name: "App",
   
10.    methods: {
    
11.       initSpread(v){
    
12.            this.spread = v;
    
13.       }
    
14.     addSheet(){ this.spread.addSheet()}
    
15. }
    
16. }

复制代码

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

1. initSpread(spread) {        
   
2.     this.spread = spread.getHost();
   
3. },     
   
4. addSheet() {
   
5.     var sheet = new GC.Spread.Sheets.Worksheet('New Sheet');
   
6.     var spreadReal = GC.Spread.Sheets.findControl(this.spread);
   
7.     spreadReal.addSheet(1,sheet);
   
8. }

复制代码

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加载数据慢，是为什么？ 出现这三种问题是使用了如下的代码：

1. <template>
   
2.    <div id="gc-designer-container">
   
3.       <gc-spread-sheets-designer
   
4.           :styleInfo="styleInfo"
   
5.          :config="config"-->
   
6.           :spreadOptions="spreadOptions"
   
7.         @designerInitialized="designerInitialized"/>
   
8.   </div>
   
9. </template>
   
10. <script>
    
11. import ...
    
12. export default {
    
13.   methods: {
    
14.      designerInitialized(value) {
    
15.          this.designer = value;
    
16.          this.spread = this.spread.getWorkbook();
    
17.          this.spread.fromJSON(json);
    
18.     }
    
19.   }
    
20. }
    
21. </script>

复制代码

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

可以参考如下代码解决：

1. <template>
   
2.     <div id="gc-designer-container">
   
3.        <gc-spread-sheets-designer
   
4.           :styleInfo="styleInfo"
   
5.           :config="config"-->
   
6.           :spreadOptions="spreadOptions"
   
7.          @designerInitialized="designerInitialized"/>
   
8.     </div>
   
9. </template>
   
10. <script>
    
11. import ...
    
12. export default {
    
13.     methods: {
    
14.         designerInitialized(designer) {
    
15.             this.designer = designer;
    
16.             let spread = designer.getWorkbook();
    
17.             spread.fromJSON(json);
    
18.        }
    
19. }
    
20. }
    
21. </script>

复制代码