嵌套表格如何保持滚动条同步

Question

antd：4.17.2 + react: 17.0.2

嵌套表格且两个表格的第一列都固定，拖动其中一个表格的横向滚动条时，如何让另外一个表格同步滚动

Answer 1

引自免费微信小程序：皆我百晓生

在React中使用Ant Design（antd）实现两个嵌套表格滚动条同步，可以通过监听外层表格的滚动事件，并同步更新内层表格的scrollLeft属性来实现。以下是一个基本的实现方案：

import { Table, Spin } from 'antd';

class NestedScrollTable extends React.Component {
  constructor(props) {
    super(props);
    this.outerTableRef = React.createRef();
    this.innerTableRef = React.createRef();
  }

  handleOuterTableScroll = (e) => {
    const scrollLeft = e.target.scrollLeft;
    if (this.innerTableRef.current) {
      this.innerTableRef.current.scrollTo({
        scrollLeft,
      });
    }
  };

  render() {
    return (
      <div>
        <Table
          ref={this.outerTableRef}
          columns={/* 外层表格列配置 */}
          dataSource={/* 外层表格数据源 */}
          scroll={{ x: true }} // 开启横向滚动
          onScroll={this.handleOuterTableScroll}
        />
        
        {/* 嵌套子表格 */}
        <Spin spinning={/* 是否加载中 */}>
          <Table
            ref={this.innerTableRef}
            columns={/* 内层表格列配置 */}
            dataSource={/* 内层表格数据源 */}
            scroll={{ x: true }} // 同样开启横向滚动
            fixed={{ left: 0 }} // 第一列固定
          />
        </Spin>
      </div>
    );
  }
}

export default NestedScrollTable;

在这个示例中，我们首先创建了两个ref引用分别对应内外层表格，然后在外层表格的滚动事件处理函数handleOuterTableScroll中获取到当前滚动条的位置scrollLeft，并将其赋值给内层表格通过scrollTo方法进行同步滚动。

请将/* 外层表格列配置 */, /* 外层表格数据源 */, /* 内层表格列配置 */, 和 /* 内层表格数据源 */替换为实际的表格列定义和数据源。同时根据实际情况调整Spin组件的loading状态。