🐛[BUG] ProTable 连续 pin 前两列的时候 left 计算错误

[mashirozx]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

代码如下：

column = [
 {
    title: '第一列',
    fixed: 'left',
 },
 {
    title: '二列',
    fixed: 'left',
 },
 // ...其他
]

这时第一列可以正常固定，但是第二列固定在 left: 0 的地方，和第一列重叠了。

原版的 antd table 没有这个问题：https://ant.design/~demos/components-table-demo-fixed-columns

📷 复现步骤

代码见下面的code sandbox里，左右滚动时录屏如下：

https://github.com/ant-design/pro-components/assets/16148054/ba248857-ba6b-4737-bf13-22847f758d0c

🏞 期望结果

实现 antd table 这样的连续 pin 两列的效果： https://ant.design/~demos/components-table-demo-fixed-columns

💻 复现代码

code sandbox

© 版本信息

• ProComponents 版本: 2.6.50
• umi 版本 文档上的 code sandbox 示例改的，没有用 umi
• 浏览器环境 Edge
• 开发环境 [e.g. mac OS] mac OS

🚑 其他信息

[mashirozx]

临时解决方案：

const [colWidth, setColWidth] = useState<number>();

const resizeObserver = useRef<ResizeObserver>();
const observedElement = useRef<Element>();

const computeColWidth = useCallback(async () => {
  await sleep(0);
  const element = document.getElementsByClassName(COL_CLASS_NAME)[0];

  if (element) {
    const { width } = element.getBoundingClientRect();

    setColWidth(width);

      if (observedElement.current) {
        resizeObserver.current?.unobserve(observedElement.current);
      }

      resizeObserver.current?.observe(element);
      observedElement.current = element;
  } else {
    setColWidth(undefined);
     if (observedElement.current) {
        resizeObserver.current?.unobserve(observedElement.current);
       observedElement.current = undefined
      }
  }
}, []);

useEffect(() => {
    resizeObserver.current = new ResizeObserver((entries) => {
      for (const entry of entries) {
        if (entry.target.classList.contains(COL_CLASS_NAME)) {
          computeColWidth();
        }
      }
    });

    return () => {
      resizeObserver.current?.disconnect();
    };
  }, [computeColWidth]);

const column = [
  {
    title: "第一列",
    dataIndex: "col1",
    search: false,
    width: 1,
    fixed: "left",
    className: COL_CLASS_NAME,
  },
  {
    title: "第二列",
    dataIndex: "col2",
    search: false,
    width: 1,
    fixed: "left",
    className: css({ left: `${colWidth ?? 0}px !important` }),
    fixed: isUndefined(colWidth) ? 'left' : undefined,
  },
];

<ProTable onLoad={computeColWidth} ... />