Spread实例销毁后，Vue的组件销毁时报错

收藏

代码：

beforeRouteLeave (to, from, next) {
this.$refs.monthSpreadJS.spread.destroy()
this.$destroy()
}

复制代码

如果只执行

this.$destroy()

复制代码

的话，内存并不会被释放。

错误日至

vue.esm.js?a026:628 [Vue warn]: Error in destroyed hook: "Error: index out of Range!"
found in
---> <GcWorksheet>
<GcSpreadSheets>
<SpreadjsPanel> at src/components/Common/SpreadJS.vue
<ElMain> at packages/main/src/main.vue
<ElContainer> at packages/container/src/main.vue
<G020202> at src/components/Page/G0202/G020202.vue
<ElAside> at packages/aside/src/main.vue
<ElContainer> at packages/container/src/main.vue
<G010102Frm> at src/components/Page/G0101/G010102.vue
<Home> at src/components/Common/Home.vue
<Root>

复制代码

KevinChen · KevinChen

您好，请问您的SpreadJS版本号多少？V11曾修复过一个内存泄漏的问题，

推荐您先把SpreadJS升级到最新版本再尝试。

如果仍有问题，请提供一个能够重现问题的示例包，上传到帖子附件。

tyasrio · tyasrio

package.json

"dependencies": {
"@grapecity/spread-excelio": "^12.1.2",
"@grapecity/spread-sheets": "^12.1.2",
"@grapecity/spread-sheets-print": "^12.1.2",
"@grapecity/spread-sheets-resources-ja": "^12.1.2",
"@grapecity/spread-sheets-vue": "^12.1.2"
}

复制代码

test.vue

<template>
<div>
<h1>Spread.Sheets</h1>
<div>
<button @click="destroy">destroy</button>
</div>
<div style="text-align: left">
<gc-spread-sheets hostClass='spread-host' @workbookInitialized='workbookInitialized($event)'>
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
</div>
</template>
<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-vue'
export default {
methods: {
workbookInitialized (spread) {
this.spread = spread
spread.refresh()
},
destroy () {
this.spread.destroy()
this.$destroy()
}
}
}
</script>
<style>
.spread-host {
width: 100%;
height: 400px;
border: 1px solid black;
}
</style>

复制代码

tyasrio · tyasrio

package.json

"dependencies": {
"@grapecity/spread-excelio": "^12.1.2",
"@grapecity/spread-sheets": "^12.1.2",
"@grapecity/spread-sheets-print": "^12.1.2",
"@grapecity/spread-sheets-resources-ja": "^12.1.2",
"@grapecity/spread-sheets-vue": "^12.1.2"
}

复制代码

test.vue

<template>
<div>
<h1>Spread.Sheets</h1>
<div>
<button @click="destroy">destroy</button>
</div>
<div style="text-align: left">
<gc-spread-sheets hostClass='spread-host' @workbookInitialized='workbookInitialized($event)'>
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
</div>
</template>
<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-vue'
export default {
methods: {
workbookInitialized (spread) {
this.spread = spread
spread.refresh()
},
destroy () {
this.spread.destroy()
this.$destroy()
}
}
}
</script>
<style>
.spread-host {
width: 100%;
height: 400px;
border: 1px solid black;
}
</style>

复制代码

KevinChen · KevinChen

本帖最后由 KevinChen 于 2019-6-5 09:24 编辑

您好，我们以您的方式创建了VUE的示例项目，没能重现这个问题，请参考附件。
附件中的示例项目，解压后需要先执行

npm install

再执行：

npm start

按照您的方式，在VueSampleV1210\src\components\QuickStart.vue中定义了beforeRouteLeave方法。

tyasrio · tyasrio

找到原因了。。
我在全局定义了一个方法。。刚才把它删了之后就好了。。。

GC.Spread.Sheets.Workbook.prototype.XXXXX

KevinChen · KevinChen

感谢反馈，问题解决了就好，本帖我结贴了，有新的问题欢迎发新贴交流~~

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

[已处理] Spread实例销毁后，Vue的组件销毁时报错

6 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章