VUE3+TS集成在线表格编辑器

收藏

本帖最后由 AlexZ 于 2022-12-30 13:45 编辑

在线表格编辑器V15之后可在VUE3中集成，相关的集成方法可以参考产品文档-组件版设计器。文档中使用的是全局注册的方式，大家可以结合实际的项目需求，改写为局部组件。

TS作为JS的超集，提供了数据类型及检查的相关特性，越来越多的被应用于项目开发中。目前，在线表格编辑器中， @grapecity/spread-sheets-designer与@grapecity/spread-sheets已经提供了TS相关的声明文件。但是由于@grapecity/spread-sheets-designer-vue还没有提供TS相关的声明文件，导致在运行时一直会有如下的提示：
1672304660845.png985830383.png

这个问题如果没有设置严格的语法检查，其实不会影响项目的编译和运行，大部分情况下只是import资源时，会有下滑线标记。此时我们可以使用以下两种方式解决此问题。
1. 修改tsconfig.json文件
找到项目中的tsconfig.json文件，在其中添加如下配置：

"noImplicitAny": false,

复制代码

添加完成之后，可以看到之前的波浪线会消失。

2. 自行添加声明文件
出现这一问题的本质原因是资源库中缺失相关的说明文件，我们可以按照如下步骤，自行给资源添加声明文件。
（1）新建文件夹src/@types，在该文件夹下添加对应资源的声明文件，声明文件名为”资源名称.d.ts“
image.png493307799.png

（2）声明模块类型
在.d.ts文件中添加如下代码：

declare module '@grapecity/spread-sheets-designer-vue' {
const content: any
export = content
}

复制代码

（3）修改tsconfig.json文件
找到项目中tsconfig.json文件，在include属性中添加@types，如下所示：
image.png37281798.png

经过上边几步，就可以轻松解决这个问题了。

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

VUE3+TS集成在线表格编辑器

0 个回复