现象:
vue代码:
<template>
<div style="height: 500px">
<div class="sample-tutorial1">
<gc-spread-sheets class="sample-spreadsheets1" @workbookInitialized="initSpread">
<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";
import * as GC from "@grapecity/spread-sheets";
GC.Spread.Sheets.LicenseKey = "xx";
export default {
name: "demoSpread",
data() {
return {};
},
mounted() {},
created() {},
methods: {
/**
* 初始化SpreadJs
*/
initSpread(spread) {
spread.options.highlightInvalidData = true;
spread.suspendPaint();
spread.clearSheetTabs();
const sheet = spread.getSheet(0);
sheet.name("demo");
sheet.options.clipBoardOptions = GC.Spread.Sheets.ClipboardPasteOptions.values;
this.groupData = [
{ key: "kk1", sideKey: "side1", c1: 1, c2: 1 },
{ key: "kk2", sideKey: "kk2", c1: 1, c2: 1 },
];
sheet.setDataSource(this.groupData);
const header = [
{
name: "key",
displayName: "key",
size: 210,
visible: true,
},
{
name: "sideKey",
displayName: "sideKey",
size: 210,
visible: true,
},
{
name: "c1",
displayName: "c1",
size: 210,
},
{
name: "c2",
displayName: "c2",
size: 210,
},
];
sheet.bindColumns(header);
const dv = new GC.Spread.Sheets.DataValidation.createNumberValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, 0, Number.MAX_SAFE_INTEGER, false);
dv.ignoreBlank(false);
sheet.setDataValidator(0, 2, dv, GC.Spread.Sheets.SheetArea.viewport);
sheet.setDataValidator(0, 3, dv, GC.Spread.Sheets.SheetArea.viewport);
spread.resumePaint();
},
},
};
</script>
<style scoped>
.sample-tutorial1 {
height: 100%;
overflow: hidden;
}
.sample-spreadsheets1 {
height: 100%;
overflow: hidden;
}
</style>
|
|