Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 明细表设置了 themeCfg 之后,操作单元格会出现卡顿问题 #2839

Open
1 of 5 tasks
duganlx opened this issue Jul 29, 2024 · 2 comments
Open
1 of 5 tasks
Assignees
Labels
🐛 bug 这个是一个 bug 💤 inactive 不活跃的 Issue 或 PR, 30天没有回复 next 2.0-next 版本的问题

Comments

@duganlx
Copy link

duganlx commented Jul 29, 2024

🏷 Version

Package Version
@antv/s2 2.0.0-next.25
@antv/s2-react 2.0.0-next.24
@antv/s2-vue

Sheet Type

  • PivotSheet
  • TableSheet
  • GridAnalysisSheet
  • StrategySheet
  • EditableSheet

🖋 Description

在使用明细表的时候,我对组件 SheetComponent 设置了 themeCfg,并绑定 onDataCellClick 和 onDataCellSelectMove 事件,在绑定的这两个单元格事件中,我会获取到选中的 rowIndex 和 colIndex 并保存到 useState 中,并在 useEffect 监听这两个变量,并进行输出到页面上。我发现在操作了几次之后,操作的流畅度变得很差。另外,我如果设置了冻结行之后,操作多次之后,冻结行的下边框会变得越来越粗,如下图所示。个人感觉是页面重新渲染时,某些变量可能没有清理,导致一直在累加导致的。

image

⌨️ Code Snapshots

s2Options 和 SheetComponent 使用代码如下。

s2Options = {
  width: 600,
  height: 400,
  seriesNumber: { enable: true, text: "序号" },
  frozen: {
    rowCount: 1,
  },
  style: {
    rowCell: {
      heightByField: {
        "0": 100,
      },
      height: 24,
    },
  },
}

<SheetComponent
  sheetType="table"
  dataCfg={s2DataConfig}
  options={s2Options}
  themeCfg={{
    theme: {
      dataCell: {
        cell: {
          interactionState: {
            selected: {
              backgroundColor: "#ffe58f",
              borderWidth: 2,
              borderColor: "red",
            },
          },
        },
      },
    },
  }}
  onDataCellClick={(cell) => {
    // console.log(cell, 'cell');
    const { viewMeta } = cell;
    const { rowIndex, colIndex } = viewMeta;

    unstable_batchedUpdates(() => {
      setCheckedRowIndex(rowIndex);
      setCheckedColIndex(colIndex);
    });
  }}
  onDataCellSelectMove={(metaList) => {
    // console.log(metaList, 'metaList/onDataCellSelectMove');
    if (metaList.length == 0) return;

    const cell = metaList[0] as any;

    unstable_batchedUpdates(() => {
      setCheckedRowIndex(cell["rowIndex"]);
      setCheckedColIndex(cell["colIndex"]);
    });
  }}
/>

🔗 Reproduce Link

https://codesandbox.io/p/sandbox/s2-themecfg-bug-xtfjdl

🤔 Steps to Reproduce

  1. 点击任何一个 s2 表格中的单元格
  2. 使用键盘的上下左右键随意点击数次
  3. 观察“选中单元格”的响应速度,以及开头冻结行的底部边线的大小和阴影

😊 Expected Behavior

预期的效果就是无论如何点击和改变选中的单元格,响应速度都很丝滑。如果设置了开头行冻结,那么冻结行底部边线也不会出现样式的改变。

😅 Current Behavior

目前,开始点击选中某个单元格之后,用键盘上下左右随意键入几次,开头冻结行底部边线样式异常(变粗、阴影变大),并且响应速度变慢

💻 System information

Environment Info
System window 10
Browser chrome v127.0.6533.72
@github-actions github-actions bot added the next 2.0-next 版本的问题 label Jul 29, 2024
@lijinke666 lijinke666 self-assigned this Aug 2, 2024
@lijinke666 lijinke666 added the 🐛 bug 这个是一个 bug label Sep 10, 2024
Copy link
Contributor

你好 @duganlx,很抱歉给你带来了不好的体验, 我们会尽快排查问题并修复, 请关注后续发布日志.

Hello, @duganlx, We are so sorry for the bad experience. We will troubleshoot and fix the problem as soon as possible. Please pay attention to the follow-up change logs.

@lijinke666
Copy link
Member

复现了下, 确实有点奇怪, 还没定位到原因, 近期再看下

@github-actions github-actions bot added the 💤 inactive 不活跃的 Issue 或 PR, 30天没有回复 label Oct 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug 这个是一个 bug 💤 inactive 不活跃的 Issue 或 PR, 30天没有回复 next 2.0-next 版本的问题
Projects
None yet
Development

No branches or pull requests

2 participants