【15.0.5】15.0.5 有没有vue3 + ts 的教程
您好,目前没有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 vue3和TypeScript都是支持的。 Joestar.Xu 发表于 2024-12-18 10:44
您好,目前没有Typescript相关的教程,仅有Vue相关的教程,请参考:
https://demo.grapecity.com.cn/spr ...
支持vue3 和 ts 吧 Joestar.Xu 发表于 2024-12-18 10:49
vue3和TypeScript都是支持的。
好的,谢谢。
<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
没太理解您的回复,是遇到什么问题了吗?
没有,结束了,谢谢 不客气,那就先结贴了,后续有其他问题的话随时开新帖提问哈。
页:
[1]