【15.0.5】vue3项目中，addSheet创建的表格，切换后会白屏

收藏

本帖最后由 Lynn.Dou 于 2022-5-24 10:29 编辑

环境：windows10

node v16.14.2
yarn 1.22.18
@vue/cli 5.0.4

步骤：

1. 使用vue/cli创建vue3项目
2. 进入vue3项目，运行@grapecity/spread-sheets-vue，安装版本为"^15.0.5"。
3. src/main.js中全局注册三个组件：GcSpreadSheets, GcWorksheet，GcColumn。（vue2版本不需要这一步）
4. 在页面内使用spreadjs组件，调用addSheet方法后，成功创建新表格，但是切换到表格后表格区域白屏，在白屏区域滚动后恢复。另外新建的表格内，数据录入也会有显示不全的问题。

其他：
vue2项目没有这个问题

相关图片：
pakeage.json
image.png833076476.png

main.js

helloworld.vue
image.png36466063.png

Lynn.Dou · Lynn.Dou

本帖最后由 Lynn.Dou 于 2022-4-7 15:25 编辑

您好，
问题收到，这边根据提供的代码实际测试下，待有进展会在本贴回复您。

Lynn.Dou · Lynn.Dou

本帖最后由 Lynn.Dou 于 2022-5-24 10:29 编辑

问题已复现，已将此问题记录下来进一步调研，待有进展会在贴中更新。
本贴先做保留处理。(SJS-12555)

Lynn.Dou · Lynn.Dou

更新进展：
出现此问题的原因是将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);
}

复制代码

示例demo可以参考附件，访问地址：http://localhost:3000/#/OutLine

六又拾柒 · 六又拾柒

Lynn.Dou 发表于 2022-5-24 10:28
更新进展：
出现此问题的原因是将spread实例挂载当前的this上，导致spread实例被自动代理，
出现了一些异 ...

你好，我遇到相同的问题
我将spread实例赋予了vue3的响应式API:ref()
如果都需要通过new 一个GC对象去解决，那么会和其他方法里面的用到的API冲突，比如找不到getActiveSheetIndex()方法
所以我想知道为什么官网中功能示例>工作簿>spread表单里面的示例代码为什么能正常运行

Lynn.Dou · Lynn.Dou

六又拾柒发表于 2023-11-1 18:00
你好，我遇到相同的问题
我将spread实例赋予了vue3的响应式API:ref()
如果都需要通过new 一个GC对象去 ...

您好，请问如何复现您描述的这个问题呢？您提供一个具体的demo来，我们实际验证下。
另，本贴时间较久已做结帖处理，建议您另开个新帖交流。

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

[已处理] 【15.0.5】vue3项目中，addSheet创建的表格，切换后会白屏

5 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人