react表格如何使用react-virtualized实现虚拟滚动

React-virtualized是一个非常流行的React库，它可以帮助我们实现大数据量的虚拟滚动效果。下面是一个使用React-virtualized实现虚拟滚动的表格的示例代码：

首先，我们需要安装React-virtualized库：

npm install react-virtualized --save

然后，我们需要引入Table和Column组件：

import { Table, Column } from 'react-virtualized';

接下来，我们可以定义一个数据源，例如：

const list = [
  { name: '张三', age: '18', address: '北京市海淀区' },
  { name: '李四', age: '20', address: '北京市朝阳区' },
  { name: '王五', age: '22', address: '北京市西城区' },
  // ...
  // 这里可以添加更多的数据
];

然后，我们可以定义一个Table组件，指定它的rowCount和rowGetter属性：

<Table
  rowCount={list.length}
  rowGetter={({ index }) => list[index]}
>

接下来，我们可以添加一些Column组件，定义每一列的属性：

<Column
  label="姓名"
  dataKey="name"
  width={100}
/>
<Column
  label="年龄"
  dataKey="age"
  width={100}
/>
<Column
  label="地址"
  dataKey="address"
  width={200}
/>

最后，我们需要在Table组件中添加一些属性，以启用虚拟滚动：

<Table
  rowCount={list.length}
  rowGetter={({ index }) => list[index]}
  headerHeight={20}
  rowHeight={30}
  width={600}
  height={400}
>

在上面的代码中，我们设置了headerHeight和rowHeight属性来指定表头和每一行的高度，width和height属性用于指定表格的宽度和高度。React-virtualized会自动根据这些属性来计算出需要渲染的行数，并且只渲染当前可见的行，以实现虚拟滚动的效果。

完整的代码示例：

import React, { Component } from 'react';
import { Table, Column } from 'react-virtualized';

const list = [
  { name: '张三', age: '18', address: '北京市海淀区' },
  { name: '李四', age: '20', address: '北京市朝阳区' },
  { name: '王五', age: '22', address: '北京市西城区' },
  // ...
  // 这里可以添加更多的数据
];

class VirtualTable extends Component {
  render() {
    return (
      <Table
        rowCount={list.length}
        rowGetter={({ index }) => list[index]}
        headerHeight={20}
        rowHeight={30}
        width={600}
        height={400}
      >
        <Column
          label="姓名"
          dataKey="name"
          width={100}
        />
        <Column
          label="年龄"
          dataKey="age"
          width={100}
        />
        <Column
          label="地址"
          dataKey="address"
          width={200}
        />
      </Table>
    );
  }
}

export default VirtualTable;