背景

本文是在不知不止呀朋友的邀请下完成的，之前就一起讨论过表格横向纵向虚拟滚动问题，既然她鸽了对ali-react-table插件库的实践介绍，那么我的第一篇文章就来介绍我在结合react使用ali-react-table时总结的一些用法吧。

问题

许多组件或插件都无法实现较复杂大数据量表格的横向虚拟滚动渲染，一般都只解决了大数据量表格的纵向滚动，所以为了兼容表格横向与纵向虚拟滚动，本文就深入了解了ali-react-table这个强大的库。

ali-react-table简介

ali-react-table是一个高性能表格组件，它不仅内嵌了虚拟滚动，能够支持表格的基本特性，而且还提供了扩展机制，能够实现较复杂表格的虚拟滚动。

特点

高性能，内置虚拟滚动，数据量较大时自动开启，也可单独配置 -- 简单灵活的 API，丰富的定制、可扩展能力
实用的表格特性：表头吸顶 & 左侧/右侧固定列 & 粘性定位的滚动条等等

基本用法

基本属性

ali-react-table提供了一个表格组件：<BaseTable />
该组件提供的主要props字段在官网有详细的介绍，大多字段和Antd中提供的Table属性类似，有些许属性不一样，本文就简单例举几个：
(1) 组件的useVirtual属性表示是否开启虚拟滚动
(2) footerDataSource 表格页脚数据源（数据中的字段一般要与 dataSource 相同）也就是Antd中的总结栏 (3) column对象的features属性用于对表格列功能进行拓展

虚拟滚动配置

数据量较大时，表格会自动开启虚拟滚动，也可以通过useVirtual属性手动开启去调整虚拟滚动配置。
当属性值为以下值时：

'auto' （默认值），表示会根据表格的行数或列数自动调整是否开启虚拟滚动
- 行数量超过 100 时，纵向虚拟滚动会自动开启
- 列数量超过 100 时，横向虚拟滚动会自动开启
表头的横向虚拟滚动默认关闭，要开启则可选择全部开启，设为true即可
true 开启所有虚拟滚动
false 关闭所有虚拟滚动
传入一个对象可以分别指定横向/纵向/表头是否开启虚拟滚动
对象的结构为 { horizontal?: boolean | 'auto', vertical?: boolean | 'auto', header?: boolean | 'auto' } 更多属性和用法可以见官网，进一步去学习。

实战

引入组件

import { BaseTable } from 'ali-react-table';

定义表格列数据columns，并且定义了表格列的分组，以表明，既能实现横向虚拟滚动又不影响表格列分组效果。

// 模拟大数据量的列columns
const columns: any = [
  {
    title: 'A',
    code: 'A',
    name: 'A',
    width: 80,
    children: [
      { title: 'A1', code: 'A1', name: 'A1', width: 40 },
      { title: 'A2', code: 'A2', name: 'A2', width: 40 },
    ],
  },
  {
    title: 'B',
    code: 'B',
    name: 'B',
    width: 80,
    children: [
      { title: 'A1', code: 'A1', name: 'A1', width: 40 },
      { title: 'A2', code: 'A2', name: 'A2', width: 40 },
    ],
  },
  {
    title: 'C',
    code: 'C',
    name: 'C',
    width: 80,
    children: [
      { title: 'A1', code: 'A1', name: 'A1', width: 40 },
      { title: 'A2', code: 'A2', name: 'A2', width: 40 },
    ],
  },
  {
    title: 'D',
    code: 'D',
    name: 'D',
    width: 80,
    children: [
      { title: 'A1', code: 'A1', name: 'A1', width: 40 },
      { title: 'A2', code: 'A2', name: 'A2', width: 40 },
    ],
  },
  { title: 'E', code: 'E', name: 'E', width: 80 },
  { title: 'F', code: 'F', name: 'F', width: 80 },
];

使用循环数组模拟出大数据量的datasource

// 模拟大数据量
const data: any = new Array(999)
  .fill(0)
  .map((item: any, idx: number) => ({
    A1: idx + 'A1',
    A2: idx + 'A2',
    B1: idx + 'B1',
    B2: idx + 'B2',
    C1: idx + 'C1',
    C2: idx + 'C2',
    D1: idx + 'D1',
    D2: idx + 'D2',
    E: idx + 'E',
    F: idx + 'F',
  }));

使用组件：

// 使用组件
const AliReactTabel2: FC = () => {
  return (
    <div>
      {' '}
      <BaseTable
        useVirtual={true}
        style={{ height: 300, overflow: 'auto' }}
        dataSource={data}
        columns={columns}
      />{' '}
    </div>
  );
};
export default AliReactTabel2;

使用过程中问题解决

控制台报如下警告：

It looks like there are several instances of "styled-components" initialized in this application. This may cause dynamic styles not rendering properly, errors happening during rehydration process and makes you application bigger without a good reason.
该问题表示存在多个styled-components实例，可能会造成动态样式不生效等，并增大应用体积。
解决方式：参照该链接解决了此问题。默认将styled-components的引用指向node_modules下的styled-components。
即在config/webpack.config.js中添加如下代码：

resolve: {
+   alias: {
+     "styled-components": path.resolve(__dirname, "../node_modules", "styled-components"),
+   }
  }

ali-react-table库介绍：实现表格横向虚拟滚动

背景

问题