Renel 发表于 2024-12-18 10:03:46

【15.0.5】15.0.5 有没有vue3 + ts 的教程


Joestar.Xu 发表于 2024-12-18 10:44:06

您好,目前没有Typescript相关的教程,仅有Vue相关的教程,请参考:

https://demo.grapecity.com.cn/spreadjs/help/docs/javascript-frameworks/UsingSpread.SheetswithVue

https://demo.grapecity.com.cn/spreadjs/help/docs/designer/spreadjs_designer_component/designer-javaScript-frameworks/designer-vue

Joestar.Xu 发表于 2024-12-18 10:03:47

vue3和TypeScript都是支持的。

Renel 发表于 2024-12-18 10:49:19

Joestar.Xu 发表于 2024-12-18 10:44
您好,目前没有Typescript相关的教程,仅有Vue相关的教程,请参考:

https://demo.grapecity.com.cn/spr ...

支持vue3 和 ts 吧

Renel 发表于 2024-12-18 10:58:27

Joestar.Xu 发表于 2024-12-18 10:49
vue3和TypeScript都是支持的。

好的,谢谢。

Renel 发表于 2024-12-18 11:02:43




<template>
<gc-spread-sheets
    :hostClass="hostClass"
    @workbookInitialized="workbookInitialized"
>
    <gc-worksheet
      :dataSource="dataTable"
      :autoGenerateColumns="autoGenerateColumns"
    >
      <gc-column
      :width="width"
      :dataField="'price'"
      :visible="visible"
      :formatter="formatter"
      :resizable="resizable"
      />
    </gc-worksheet>
</gc-spread-sheets>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import {
GcSpreadSheets,
GcWorksheet,
GcColumn,
} from "@grapecity/spread-sheets-vue";
const hostClass = "spread-host";
const autoGenerateColumns = true;
const width = 300;
const visible = true;
const resizable = true;
const formatter = "$ #.00";
const hostStyle = {
width: "100%",
height: "100vh",
};
const dataTable = computed(() => {
let dataTable = [];
for (let i = 0; i < 42; i++) {
    dataTable.push({ price: i + 0.56 });
}
return dataTable;
});

function workbookInitialized(spread: GC.Spread.Sheets.Workbook) {
let sheet = spread.getActiveSheet();
console.log(sheet);
}
</script>
<style scoped>
.spread-host {
width: 500px;
height: 600px;
}
</style>




探索得知:
1. 导入方式有所变化,如:
import {
GcSpreadSheets,
GcWorksheet,
GcColumn,
} from "@grapecity/spread-sheets-vue";
2. 需要定义类型申明文件,如在src/types/spreadjs.d.ts 中 declare module "@grapecity/spread-sheets-vue";
其他都没有变化,可以参考下。



Joestar.Xu 发表于 2024-12-18 12:14:57

没太理解您的回复,是遇到什么问题了吗?

Renel 发表于 2024-12-18 12:21:04

Joestar.Xu 发表于 2024-12-18 12:14
没太理解您的回复,是遇到什么问题了吗?

没有,结束了,谢谢

Joestar.Xu 发表于 2024-12-18 12:27:02

不客气,那就先结贴了,后续有其他问题的话随时开新帖提问哈。
页: [1]
查看完整版本: 【15.0.5】15.0.5 有没有vue3 + ts 的教程