<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";
其他都没有变化，可以参考下。
|
来自 2#
陕公网安备：61019002000258 |
隐私政策 |
网站地图