SpreadJS는 행, 열 또는 시트를 추가하거나 제거하는 것과 같이 코드가 통합 문서를 변경한 후 매번 자동으로 다시 칠합니다. 특히 코드가 통합 문서를 많이 변경하는 경우 SpreadJS 개발자를 위한 모범 사례는 코드 시작 시 칠하기를 일시 중단하고 종료 시 칠하기를 다시 시작하는 것입니다. 이렇게 하면 SpreadJS는 모든 변경이 수행된 후 한 번만 다시 칠하므로 성능이 크게 향상됩니다.
workbook 개체의 suspendPaint 메서드를 사용하여 칠하기를 일시 중단하고 resumePaint를 사용하여 다시 시작합니다.
컴포넌트가 자체적으로 다시 칠하지 않아도 되는 SpreadJS 컴포넌트에서 코드가 변경을 수행하는 경우 강제로 다시 칠할 수 있습니다.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<label>Click buttons to suspend and resume painting the Spread component, and see how actions are
affected by that state.</label>
</div>
1. Click 'Suspend Paint' <input type="button" id="suspendPaint" value="Suspend Paint"
@click="suspendPaint" />
<br />
2. Add various sheets <input type="button" id="btnAddSheet" value="Add Sheet" @click="addSheet" />
<br />
3. Click 'Resume Paint' <input type="button" id="resumePaint" value="Resume Paint" @click="resumePaint" />
<div class="option-row">
<label>The rendering performance improves when using suspendPaint/ResumePaint functionality. </label>
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-vue";
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
let spread = null;
const initSpread = (s) => spread = s;
const addSheet = () => spread.addSheet(0);
const suspendPaint = () => spread.suspendPaint();
const resumePaint = () => spread.resumePaint();
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 16px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</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">
<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>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/ko/lib/vue3/license.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': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
