双Table滚动条同步实现（react+ant-design）

实现效果

核心方法：

const subCapture = (e, index, key) => {
    let { ref1, ref2 } = subDatas[index];
    console.log('e', e);
    console.log('ref1', ref1);
    const scrolledTable = key === 'ref1' ? ref1?.current.querySelector(".ant-table-body") : ref2?.current.querySelector(".ant-table-body");
    const otherTable = key === 'ref1' ? ref2?.current.querySelector(".ant-table-body") : ref1?.current.querySelector(".ant-table-body");
    otherTable.scrollTop = scrolledTable.scrollTop;
    otherTable.scrollLeft = scrolledTable.scrollLeft;
  }

给每个元素添加ref

  useEffect(() => {
    setSubDatas(subData)
    console.log('subData-ref', subData);
    let arr = [0, 1].map((_, i) => React.createRef())
    setElRefs(arr);
  }, []);

dom使用

{subDatas.map((item, index) => {
        return (
          <div className={styles.CTableBox}>
            <div className={styles.sTable}>
              <div>
                {item.info?.firstSub?.sVersion}（{item.info?.firstSub?.masterDataName}）
              </div>
              <div ref={item.ref1} onScrollCapture={(e) => subCapture(e, index, 'ref1')}>
                <table
                  Refs={ref => {
                    setTableRef(ref);
                    // this.tableRef = ref;
                  }}
                  // scrollLeft={100}
                  scroll={{ x: 500 }}
                  columns={columns}
                  tableBoxClass={styles.tableBoxClass}
                  showPagination={false}
                  rowKey="table1"
                  data={{
                    list: item.sub1,
                    pagination: {
                      showPagination: false,
                    },
                  }}
                  canExpand={false}
                  canSelect={false}
                  autoPageSize={false}
                />
              </div>
            </div>
            <div className={styles.sTable}>
              <div>
                {item.info?.secondSub?.sVersion}（{item.info?.secondSub?.masterDataName}）
              </div>
              <div ref={item.ref2} onScrollCapture={(e) => subCapture(e, index, 'ref2')}>
                <table
                  scroll={{ x: 500 }}
                  columns={columns}
                  tableBoxClass={styles.tableBoxClass}
                  showPagination={false}
                  rowKey="table2"
                  data={{
                    list: item.sub2,
                    pagination: {
                      showPagination: false,
                    },
                  }}
                  canExpand={false}
                  canSelect={false}
                  autoPageSize={false}
                />
              </div>
            </div>
          </div>
        );
      })}

结束

2023.3.25