SpreadJS refresh方法延迟

监听侧边栏，动态调整表格宽度，调用refresh方法确实可以自适应重绘，但是特别卡顿加上setTimeOut也无效

watch(
  () => appStore.layoutSetting.collapsed,
  (collapsed) => {
    if (spreadSheet.value) {
      spreadSheet.value.getHost().style.width = collapsed
        ? `${window.innerWidth - 200}px`
        : `${window.innerWidth - 400}px`;
      // spreadSheet.value.refresh();
    }
  },
);

您好，需要看一下您是怎么定义spreadSheet的，看一下相关代码。
不建议一直使用spreadSheet.value

可以将其赋值给一个变量。

您好！跟您确认下都在什么场景下需要调用refresh方法呢？
您试下重新绘制，即Workbook:repaint()。
请参考官网API文档了解详情：https://demo.grapecity.com.cn/sp ... ts.Workbook#repaint

Wilson.Zhang 发表于 2024-8-21 17:57
您好！跟您确认下都在什么场景下需要调用refresh方法呢？
您试下重新绘制，即Workbook:repaint()。
请参 ...

框架中左边菜单的折叠和展开；我刚刚试过watch(
  () => appStore.layoutSetting.collapsed,
  (collapsed) => {
    if (spreadSheet.value) {
      spreadSheet.value.getHost().style.width = collapsed
        ? `${window.innerWidth - 180}px`
        : `${window.innerWidth - 400}px`;
      // setTimeout(() => {
      //   window.dispatchEvent(new Event('resize'));
      // }, 0);
    }
  },
);调用浏览器resize，虽然比refresh好多了但是还是有点卡顿

Wilson.Zhang 发表于 2024-8-21 17:57
您好！跟您确认下都在什么场景下需要调用refresh方法呢？
您试下重新绘制，即Workbook:repaint()。
请参 ...

repaint也试过watch(
  () => appStore.layoutSetting.collapsed,
  (collapsed) => {
    if (spreadSheet.value) {
      spreadSheet.value.getHost().style.width = collapsed
        ? `${window.innerWidth - 180}px`
        : `${window.innerWidth - 400}px`;
      // setTimeout(() => {
      //   window.dispatchEvent(new Event('resize'));
      // }, 0);
      setTimeout(() => {
        spreadSheet.value.invalidateLayout();
        spreadSheet.value.repaint();
      }, 0);
    }
  },
);用repaint不仅卡顿，连自适应也不生效

Ellia.Duan 发表于 2024-8-22 09:15
您好，需要看一下您是怎么定义spreadSheet的，看一下相关代码。
不建议一直使用spreadSheet.value

const spreadSheet = ref<any>(null); async function initSpread(spread?: any) {if (spread) spreadSheet.value = spread;........} <gc-spread-sheets
          v-if="spreadReady"
          id="gcBook"
          class="spreadTable"
          :hostStyle="{ width: '100%' }"
          @workbookInitialized="initSpread"
        >

请尝试下面的代码，是否可以解决您的问题

1. import {markRaw} from 'vue'
   
2. 
   
3. spreadSheet.value = markRaw(spread)

复制代码

Ellia.Duan 发表于 2024-8-22 10:13
请尝试下面的代码，是否可以解决您的问题

8watch(
  () => appStore.layoutSetting.collapsed,
  (collapsed) => {
    if (spreadSheet.value) {
      const srpeadMarkRaw = markRaw(spreadSheet.value);
      srpeadMarkRaw.getHost().style.width = collapsed
        ? `${window.innerWidth - 200}px`
        : `${window.innerWidth - 400}px`;
      setTimeout(() => {
        // window.dispatchEvent(new Event('resize'));
        srpeadMarkRaw.refresh();
      }, 0);
    }
  },
);能自适应了，但是还是卡，比之前直接refresh要好一些

Ellia.Duan 发表于 2024-8-22 10:13
请尝试下面的代码，是否可以解决您的问题

1. // 处理调整大小
   
2. function handleResize(collapsed) {
   
3.   if (spreadSheet.value) {
   
4.     const newWidth = collapsed
   
5.       ? `${window.innerWidth - 200}px`
   
6.       : `${window.innerWidth - 400}px`;
   
7.     const host = spreadSheet.value.getHost();
   
8. 
   
9.     if (host.style.width !== newWidth) {
   
10.       host.style.width = newWidth;
    
11.       window.dispatchEvent(new Event('resize')); // 触发 resize 事件
    
12.     }
    
13.   }
    
14. }
    
15. 
    
16. // 防抖函数实现
    
17. function debounce(func, wait) {
    
18.   let timeout;
    
19.   return function (...args) {
    
20.     clearTimeout(timeout);
    
21.     timeout = setTimeout(() => func(...args), wait);
    
22.   };
    
23. }
    
24. 
    
25. // 使用防抖技术优化 watch 函数
    
26. const debouncedHandleResize = debounce(handleResize, 100);
    
27. 
    
28. watch(
    
29.   () => appStore.layoutSetting.collapsed,
    
30.   (collapsed) => {
    
31.     debouncedHandleResize(collapsed);
    
32.   },
    
33. );  

复制代码

用了防抖好多了，还是不丝滑

如果您觉得还存在卡顿问题，是否可以录个视频以及上传一个demo ,我们根据demo为您调研方案。