特征

  • 极大的扩展性。官方只提供基本功能，各种功能都是通过其拓展而来，而antd的table则是直接内置了各种功能。
  • 极高性能。貌似使用这个没使用antd就是因为性能的问题。

查看扩展的原理

用treeMode插件来看背后pipeline的实现

我们看一个插件是如何实现的，来一探ali-react-table背后

treeMode看如何处理数据，（展开树结构），以及增加dom结构（下展开折叠样式）

  1. 插件入参是暴露的pipeline状态，然后return一个pipeline的链式处理

    1. pipeline上提供了插件保存状态的方法，getStateAtKey，setStateAtKey


      1. export function treeMode(opts: TreeModeFeatureOptions = {}) {
      2. return function treeModeStep(pipeline: TablePipeline) {
      3. const ctx = pipeline.ctx;
      5. const openKeys: string[] = opts.openKeys ?? pipeline.getStateAtKey(stateKey) ?? opts.defaultOpenKeys ?? []
      6. const openKeySet = new Set(openKeys)
      8. return pipeline.mapDataSource(processDataSource).mapColumns(processColumns)
      9. }
      10. }

      processColumns

  2. mapColumns提供了处理column的方法

    1. 对第一列做了修改，render即包裹了展开折叠监听，以及onClick的事件处理

    2. getCellProps对原onClick绑定函数也做了些处理，增加toggle逻辑 ```typescript function processColumns(columns: ArtColumn[]) { const [firstCol, …others] = columns

      // 修改第一列的render，加入tree展开折叠箭头，以及添加click的处理展开折叠监听函数 const render = (value: any, record: any, recordIndex: number) => { // 原有content的渲染 const content = internals.safeRender(firstCol, record, recordIndex)

      return }

      return [ {

      1. ...firstCol,

      title: , render: , getCellProps: , }, …others ]

}

  2. 1. processDataSource
  3.    1. 根据openKeySet记录展开的行，然后对树形结构递归处理，扁平的存储到result中并返回，未展开的则被剃掉
  4.    1. item信息中有depth信息，根据depth信息渲染锁进
  6. `processDataSource`
  7. ```typescript
  8. // input即数据
  9. function processDataSource(input: any[]) {
  10.   const result: any[] = []
  11.   dfs(input, 0)
  13.   function dfs(nodes: any[], depth: number) {
  14.     for (const node of nodes) {
  16.       const expanded = openKeySet.has(rowKey)
  18.       if (!isLeaf && expanded) {
  19.         dfs(node.children, depth + 1)
  20.       } 
  22.     }
  23.   }
  25.   return result
  26. }

多个插件之间，如何共同作用，如过滤，排序，？

pipeline有哪些拓展方法？

treeSelect怎么实现？ treeMode和treeSelect如何结合？

既然dataSource已经被treeMode插件处理了，那怎么做树状选择的判断？

  1. 根据被处理过数据中带的depth来判断
  2. 通过原始数据来判断

使用了2，传入了原始的dataSource

  1. const pipeline = useTablePipeline({ components: fusion })
  2.     .input({ dataSource, columns })
  3.     .primaryKey('id')
  4.     .use(features.treeMode())
  5.     .use(
  6.       features.treeSelect({
  7.         tree: dataSource,
  8.         rootKey: 'root',
  9.         checkboxPlacement: 'start',
  10.         clickArea: 'cell',
  11.         defaultValue: ['1', '3'],
  12.         checkboxColumn: { lock: true },
  13.         highlightRowWhenSelected: true,
  14.       }),
  15.     )

Pipeline有哪些参数

  1. getDataSource
  2. getColumns
  3. dataSource
  4. columns

总结

  • 提供插件状态的存储，状态变化后引起更新
  • 提供修改column和dataSource的方法，通过修改此实现了折叠
  • 前提是抽象列渲染为column
  • 整个都扁平化处理，

缺点

  • 数据被之前处理过，后续可能无法用，如treeMode和treeSelect之间。
  • 参数过多，每个pipeline都一堆参数