After the user changes the sheet, the Spread component needs to deal with these changes and paint a new sheet.
You can use the repaint method to repaint the sheet.
Most of the time, after you change the sheet, the component will auto refresh to respond to the changes. If you make a lot of changes at one time, but don't want the sheet to repaint many times, then you can use the suspendPaint method to stop the automatic repaint until the changes are complete. Then call the resumePaint method to redraw the sheet, as shown in the following example:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<input type="button" id="suspendPaint" value="Suspend Paint" v-on:click="suspendPaint" />
<label>1. Suspend the paint of Workbook</label>
</div>
<div class="option-row">
<input type="button" id="setValue" value="Set Value Array" v-on:click="setValue" />
<label>2. Set a range set of values on the sheet</label>
</div>
<div class="option-row">
<input type="button" id="resumePaint" value="Resume Paint" v-on:click="resumePaint" />
<label>3. Resume the paint of Workbook</label>
</div>
</div>
</div>
</template>
<script setup>
import { shallowRef, watch, computed } from "vue";
import "@mescius/spread-sheets-vue";
const spreadRef = shallowRef(null);
let initSpread = function (spread) {
spreadRef.value = spread;
}
function setValue() {
var sheet = spreadRef.value.getActiveSheet();
var cellRange = sheet.getSelections()[0];
var salesData = [
["Salesperson", "Region", "Sales Amount", "Commission %", "Commission Amount"],
["Joe", "North", 260, '10%', 26],
["Robert", "South", 660, '15%', 99],
["Michelle", "East", 940, '15%', 141],
["Erich", "West", 410, '12%', 49.2],
["Dafna", "North", 800, '15%', 120],
["Rob", "South", 900, '15%', 135]
];
if (cellRange) {
for (var row = cellRange.row, rowCount = cellRange.row + cellRange.rowCount; row < rowCount; row++) {
for (var col = cellRange.col, colCount = cellRange.col + cellRange.colCount; col < colCount; col++) {
sheet.setArray(row, col, salesData);
sheet.getCell(row, col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
}
}
}
}
function suspendPaint() {
spreadRef.value.suspendPaint();
}
function resumePaint() {
spreadRef.value.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;
}
.labelStyle {
color: rgb(226, 107, 29);
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
height: 30px;
line-height: 30px
}
input[type=button] {
margin-top: 6px;
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$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/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$/en/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-en': 'npm:@mescius/spread-sheets-resources-en/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);
