새 창에서 데모를 열어 디자이너 열기
분산 모드는 다음과 같습니다.
삽입: 기본 모드로, 이 모드는 보고서를 렌더링할 때 행 또는 열을 삽입합니다.
덮어쓰기: 이 모드는 보고서를 렌더링할 때 새 행 또는 열을 삽입하지 않습니다. 보고서 레이아웃과 크기가 템플릿과 동일합니다.
덮어쓰기 분산 모드에는 다음과 같은 제한 사항이 있습니다.
병합되지 않은 셀에서만 작동합니다.
'목록' 유형 템플릿 셀에서만 작동합니다.
다음 코드를 사용하여 셀의 분산 모드를 설정할 수 있습니다.
<template>
<gc-spread-sheets-designer class="demo" v-if="showDesigner" @designerInitialized="initDesigner" />
<gc-spread-sheets class="demo" v-else @workbookInitialized="initSpread" />
</template>
<script setup>
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-print';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
import '@mescius/spread-sheets-reportsheet-addon';
import '@mescius/spread-sheets-tablesheet';
import '@mescius/spread-sheets-ganttsheet';
import '@mescius/spread-sheets-formula-panel';
import '@mescius/spread-sheets-vue';
import '@mescius/spread-sheets-resources-ko';
import '@mescius/spread-sheets-designer-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
import '@mescius/spread-sheets-designer-vue';
import { ref } from 'vue';
import '$DEMOROOT$/spread/source/js/react_vue/license.js';
import { registerlic } from '$DEMOROOT$/spread/source/js/designer/react_vue/license.js';
registerlic(GC);
const showDesigner = top === window;
const spreadRef = ref(null);
const designerRef = ref(null);
async function initDesigner(designer) {
designerRef.value = designer;
await initSpread(designer.getWorkbook());
designer.refresh();
}
async function initSpread(spread) {
spreadRef.value = spread;
spread.suspendPaint();
spread.setSheetCount(1);
const loadingTip = addLoadingTip();
const res = await fetch('$DEMOROOT$/ko/sample/features/report-sheet/layout-settings/spill-mode/spread.json');
await spread.fromJSON(await res.json());
loadingTip.remove();
spread.resumePaint();
}
function addLoadingTip() {
const div = document.createElement('div');
div.style.position = 'absolute';
div.style.inset = '0';
div.style.display = 'flex';
div.style.alignItems = 'center';
div.style.justifyContent = 'center';
div.style.background = 'white';
div.style.zIndex = '100';
div.textContent = 'Loading data from server ...';
document.body.appendChild(div);
return div;
}
</script>
<style scoped>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
.demo {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/vue3/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">
<script src="$DEMOROOT$/ko/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
System.import("./src/app.js");
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js',
'@mescius/spread-sheets-designer-resources-ko': 'npm:@mescius/spread-sheets-designer-resources-ko/index.js',
'@mescius/spread-sheets-designer-vue': 'npm:@mescius/spread-sheets-designer-vue/index.js',
'@mescius/spread-sheets-designer': 'npm:@mescius/spread-sheets-designer/index.js',
'@mescius/spread-excelio': 'npm:@mescius/spread-excelio/index.js',
'@mescius/spread-sheets-barcode': 'npm:@mescius/spread-sheets-barcode/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-languagepackages': 'npm:@mescius/spread-sheets-languagepackages/index.js',
'@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js',
'@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-reportsheet-addon': 'npm:@mescius/spread-sheets-reportsheet-addon/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-ganttsheet': 'npm:@mescius/spread-sheets-ganttsheet/index.js',
'@mescius/spread-sheets-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
