From 469fe837e8d097b0050f91170ffddfa5ed013478 Mon Sep 17 00:00:00 2001
From: liyulin <501351981@qq.com>
Date: Fri, 19 May 2023 18:42:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20excel=E5=BC=B9=E7=AA=97=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E4=B8=AD=E5=AE=BD=E5=BA=A6=E5=8F=98=E5=8C=96=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/packages/excel/package.json |   2 +-
 core/packages/excel/src/main.vue | 107 ++++++++++++++++---------------
 2 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/core/packages/excel/package.json b/core/packages/excel/package.json
index b5bdf79..790d91c 100644
--- a/core/packages/excel/package.json
+++ b/core/packages/excel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-office/excel",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "",
   "main": "lib/index.js",
   "files": [
diff --git a/core/packages/excel/src/main.vue b/core/packages/excel/src/main.vue
index 8d2517e..a9b7f4a 100644
--- a/core/packages/excel/src/main.vue
+++ b/core/packages/excel/src/main.vue
@@ -1,5 +1,5 @@
 <script>
-import {defineComponent, ref, onMounted, onBeforeUnmount, watch} from 'vue-demi';
+import {defineComponent, ref, onMounted, onBeforeUnmount, watch, nextTick} from 'vue-demi';
 import Spreadsheet from 'x-data-spreadsheet';
 import {getData, readExcelData, transferExcelToSpreadSheet} from './excel';
 import {renderImage, clearCache} from './media';
@@ -64,61 +64,64 @@ export default defineComponent({
         const observerCallback = debounce(readOnlyInput, 200).bind(this,rootRef);
         const observer = new MutationObserver(observerCallback);
         const observerConfig = { attributes: true, childList: true, subtree: true };
+        
         onMounted(() => {
-            observer.observe(rootRef.value, observerConfig);
-            observerCallback(rootRef);
+            nextTick(()=>{
+                observer.observe(rootRef.value, observerConfig);
+                observerCallback(rootRef);
 
-            window.xs = xs = new Spreadsheet(rootRef.value, {
-                mode: 'read',
-                showToolbar: false,
-                view: {
-                    height: () => wrapperRef.value.clientHeight || 300,
-                    width: () => wrapperRef.value.clientWidth || 300,
-                },
-                row: {
-                    height: 24,
-                    len: 100
-                },
-                col: {
-                    len: 26,
-                    width: 80,
-                    indexWidth: 60,
-                    minWidth: 60,
-                },
-                autoFocus: false
-            }).loadData({});
+                window.xs = xs = new Spreadsheet(rootRef.value, {
+                    mode: 'read',
+                    showToolbar: false,
+                    view: {
+                        height: () => wrapperRef.value && wrapperRef.value.clientHeight || 300,
+                        width: () => wrapperRef.value && wrapperRef.value.clientWidth || 300,
+                    },
+                    row: {
+                        height: 24,
+                        len: 100
+                    },
+                    col: {
+                        len: 26,
+                        width: 80,
+                        indexWidth: 60,
+                        minWidth: 60,
+                    },
+                    autoFocus: false
+                }).loadData({});
 
-            let swapFunc = xs.bottombar.swapFunc;
-            xs.bottombar.swapFunc = function (index) {
-                swapFunc.call(xs.bottombar, index);
-                sheetIndex = index + 1;
-                setTimeout(()=>{
-                    xs.reRender();
+                let swapFunc = xs.bottombar.swapFunc;
+                xs.bottombar.swapFunc = function (index) {
+                    swapFunc.call(xs.bottombar, index);
+                    sheetIndex = index + 1;
+                    setTimeout(()=>{
+                        xs.reRender();
+                        renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
+                    });
+
+                };
+                let clear = xs.sheet.editor.clear;
+                xs.sheet.editor.clear = function (...args){
+                    clear.apply(xs.sheet.editor, args);
+                    setTimeout(()=>{
+                        renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
+                    });
+                };
+                let setOffset = xs.sheet.editor.setOffset;
+                xs.sheet.editor.setOffset = function (...args){
+                    setOffset.apply(xs.sheet.editor, args);
+                    offset = args[0];
                     renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
-                });
-
-            };
-            let clear = xs.sheet.editor.clear;
-            xs.sheet.editor.clear = function (...args){
-                clear.apply(xs.sheet.editor, args);
-                setTimeout(()=>{
-                    renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
-                });
-            };
-            let setOffset = xs.sheet.editor.setOffset;
-            xs.sheet.editor.setOffset = function (...args){
-                setOffset.apply(xs.sheet.editor, args);
-                offset = args[0];
-                renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
-            };
-            const canvas = rootRef.value.querySelector('canvas');
-            ctx = canvas.getContext('2d');
-            if (props.src) {
-                getData(props.src, props.requestOptions).then(renderExcel).catch(e => {
-                    xs.loadData({});
-                    emit('error', e);
-                });
-            }
+                };
+                const canvas = rootRef.value.querySelector('canvas');
+                ctx = canvas.getContext('2d');
+                if (props.src) {
+                    getData(props.src, props.requestOptions).then(renderExcel).catch(e => {
+                        xs.loadData({});
+                        emit('error', e);
+                    });
+                }
+            });
         });
 
         onBeforeUnmount(()=>{