🐛表格滚动问题

[Lixin1993]

🏷 Version

Package	Version
@antv/s2	1.44.0
@antv/s2-react
@antv/s2-vue

Sheet Type

趋势表和透视表

• [ ] PivotSheet
• [ ] TableSheet
• [ ] GridAnalysisSheet
• [ ] StrategySheet
• [ ] EditableSheet

🖋 Description

表格滚动中调用表格render方法，滚动条不动，内容滚动

⌨️ Code Snapshots

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

😅 Current Behavior

💻 System information

Environment	Info
System
Browser

[qxqzx13]

@antv/s2-react 表格滚动中数据更新了，滚动条和表头不动，内容滚动。表头和内容会分离

[github-actions[bot]]

你好 @Lixin1993，请提供一个可以在线访问的链接, 或者使用 codesandbox 提供示例并详细说明复现步骤 (查看更多模板), 15 天内未回复issue自动关闭。

Hello, @Lixin1993, please provide an accessible link or usage codesandbox to describe the reproduction steps (more template). The issue will be closed without any replay within 15 days.

[qxqzx13]

import React, { useState, useRef, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { orderBy } from 'lodash'; import { Button } from 'antd'; import { SheetComponent } from '@antv/s2-react'; import insertCss from 'insert-css'; import '@antv/s2-react/dist/style.min.css';

fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json') .then((res) => res.json()) .then((res) => { const s2Options = { width: 200, height: 480, };

const s2DataConfig = {
  fields: {
    columns: ['province', 'city', 'type', 'price', 'cost'],
  },
  meta: [
    {
      field: 'province',
      name: '省份',
    },
    {
      field: 'city',
      name: '城市',
    },
    {
      field: 'type',
      name: '商品类别',
    },
    {
      field: 'price',
      name: '价格',
    },
    {
      field: 'cost',
      name: '成本',
    },
  ],
  data: res,
  sortParams: [
    {
      sortFieldId: 'price',
      sortMethod: 'DESC',
    },
  ],
};

const App = () => {
  const [dataCfg, setDataCfg] = useState(s2DataConfig);
  const s2Ref = useRef();

  useEffect(() => {
    setInterval(() => {setDataCfg({...dataCfg})}, 1000);
  }, []);

  return (
    <>
      <Button
        onClick={() => {
          setDataCfg({
            ...dataCfg,
            sortParams: [
              {
                sortFieldId: 'price',
                sortMethod: 'DESC',
              },
            ],
          });
        }}
      >
        使用 sortMethod 排序
      </Button>
      <Button
        onClick={() => {
          setDataCfg({
            ...dataCfg,
            sortParams: [
              {
                sortFieldId: 'price',
                sortMethod: 'DESC',
                sortFunc: ({ data, sortFieldId, sortMethod }) => {
                  return orderBy(data, [sortFieldId], [sortMethod]);
                },
              },
            ],
          });
        }}
      >
        使用 sortFunc 自定义排序
      </Button>
      <Button
        onClick={() => {
          setDataCfg({
            ...dataCfg,
            sortParams: [
              {
                sortFieldId: 'city',
                sortBy: ['白山', '长春', '杭州', '舟山'],
              },
            ],
          });
        }}
      >
        使用 sortBy 显示指定顺序
      </Button>
      <Button
        onClick={() => {
          setDataCfg({
            ...dataCfg,
            sortParams: [
              {
                sortFieldId: 'price',
                sortMethod: 'DESC',
                query: {
                  city: '浙江',
                },
              },
            ],
          });
        }}
      >
        使用 query 缩小排序范围
      </Button>

      <SheetComponent
        ref={s2Ref}
        dataCfg={dataCfg}
        options={s2Options}
        sheetType="table"
      />
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('container'));

});

// 我们用 insert-css 演示引入自定义样式 // 推荐将样式添加到自己的样式文件中 // 若拷贝官方代码，别忘了 npm install insert-css insertCss(.ant-btn { margin-right: 10px; margin-bottom: 10px; });

手动滑动横向滚动条, 表头和内容会分离, 同时滚动条会不再移动

[lijinke666]

useEffect(() => { setInterval(() => {setDataCfg({...dataCfg})}, 1000); }, []);

这个是模拟数据实时更新的场景吗?

[qxqzx13]

useEffect(() => { setInterval(() => {setDataCfg({...dataCfg})}, 1000); }, []);

这个是模拟数据实时更新的场景吗?

是的

[github-actions[bot]]

由于该 issue 被标记为需要复现，却 15 天未收到回应。现关闭 issue，若有任何问题，可评论回复。

Since the issue was labeled as "🤔 need reproduce" but no response was received for 15 days. Now close the issue. If you have any questions, feel free to comment.

[pppppppppppp12]

一样的问题，请问这个有下文吗 @lijinke666