Antd Table：如何以编程方式确保行可见？答案

【问题标题】：Antd Table: How programmatically ensure row visible?Antd Table：如何以编程方式确保行可见？
【发布时间】：2021-10-12 06:50:46
【问题描述】：

使用 Ant Design Table，我如何以编程方式滚动（我正在使用 scroll:y）一行到视图中，因为它是行键以确保它是可见的？

【问题讨论】：

标签： reactjs antd ant-design-pro

【解决方案1】：

选项 1：

使用document.querySelector('div.ant-table-body').scrollTop = rowIndex * 50

如果行高稳定，示例使用55px

检查工作的stackblitz。

（见 antd 问题 Scroll to row of virtual table ）

class App extends React.Component {
  handleScroll = () => {
    document.querySelector('div.ant-table-body').scrollTop = 20 * 55;
  };

  render() {
    return (
      <div>
        <p>
          <Button type="primary" onClick={this.handleScroll}>
            Scroll
          </Button>
        </p>
        <Table
          columns={columns}
          dataSource={data}
          pagination={{ pageSize: 50 }}
          scroll={{ y: 240 }}
        />
      </div>
    );
  }
}

选项 2：

将第三方库scroll-into-view 与rowClassName 一起使用。

查看附件codesandbox和对应的antd issueScroll the table to the specified row。

import React from 'react';
import { render } from 'react-dom';
import 'antd/dist/antd.css';
import { Table, Button } from 'antd';
import scrollIntoView from 'scroll-into-view';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: 150,
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

class App extends React.Component {
  handleScroll = () => {
    scrollIntoView(document.querySelector('.scroll-row'), {
      align: {
        top: 0,
      },
    });
  }

  render() {
    return (
      <div>
        <p>
          <Button type="primary" onClick={this.handleScroll}>Scroll</Button>
        </p>
        <Table
          rowClassName={(record, index) => (index === 20 ? 'scroll-row' : '')}
          columns={columns}
          dataSource={data}
          pagination={{ pageSize: 50 }}
          scroll={{ y: 240 }}
        />
      </div>
    );
  }
}

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

【讨论】：

【解决方案2】：

以防万一，如果您有更改当前选择的依赖项，这里是 TS 代码，用于按键查找行并滚动：

useEffect(() => {
        const rows = document.querySelector('.your-antd-table')
                      ?.getElementsByClassName('ant-table-row');
        if (!rows) return;
        const myRowKey = f(stuffNeededToFindYourRowKey);
        const target = _.find(rows, 
            r => r.getAttribute('data-row-key') === myRowKey);
        if (!target) return;
        scrollIntoView(target as HTMLElement);
    }, [stuffNeededToFindYourRowKey])

【讨论】：