SpreadJS refresh方法延迟

Ellia.Duan

监听侧边栏，动态调整表格宽度，调用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();
}
  },
);

Ellia.Duan · Ellia.Duan

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

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

Wilson.Zhang · Wilson.Zhang

您好！跟您确认下都在什么场景下需要调用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"
      >

Ellia.Duan · Ellia.Duan

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

import {markRaw} from 'vue'
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
请尝试下面的代码，是否可以解决您的问题

// 处理调整大小
function handleResize(collapsed) {
if (spreadSheet.value) {
const newWidth = collapsed
? `${window.innerWidth - 200}px`
: `${window.innerWidth - 400}px`;
const host = spreadSheet.value.getHost();
if (host.style.width !== newWidth) {
host.style.width = newWidth;
window.dispatchEvent(new Event('resize')); // 触发 resize 事件
}
}
}
// 防抖函数实现
function debounce(func, wait) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func(...args), wait);
};
}
// 使用防抖技术优化 watch 函数
const debouncedHandleResize = debounce(handleResize, 100);
watch(
() => appStore.layoutSetting.collapsed,
(collapsed) => {
debouncedHandleResize(collapsed);
},
);

复制代码

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

Ellia.Duan · Ellia.Duan

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

		自动登录	找回密码
密码			立即注册

[已处理] SpreadJS refresh方法延迟

最佳答案

11 个回复

SpreadJS 认证

SpreadJS 高级认证