Skip to main content

拖拽调整列宽

在表头的右侧放置一个「把手」,允许用户拖动把手来调整该列的宽度。

示例#

预览点击展开或收拢
源码点击展开或收拢

使用方式#

pipeline.use(features.columnResize(options))

options 结构如下:

export interface ColumnResizeFeatureOptions {  /** 非受控用法:默认的列宽数组 */  defaultSizes?: number[]
  /** 受控用法:列宽数组 */  sizes?: number[]  /** 受控用法:修改宽度的回调函数 */  onChangeSizes?(nextSizes: number[]): void
  /** 列的最小宽度,默认为 60 */  minSize?: number  /** 如果列宽数组中没有提供有效的宽度,fallbackSize 将作为该列的宽度,默认为 150 */  fallbackSize?: number  /** 列的最大宽度,默认为 1000 */  maxSize?: number
  /** 是否在调整列宽时禁用 user-select,默认为 true */  disableUserSelectWhenResizing?: boolean
  /** 把手的背景色 */  handleBackground?: string  /** 鼠标悬停时,把手的背景色 */  handleHoverBackground?: string  /** 把手激活时的背景色 */  handleActiveBackground?: string}

注意点#

  • 为叶子节点设置列宽才会生效,非叶节点的列宽由其子节点宽度累加得到
    • 拖动叶子节点时,「拖动的距离」等于「宽度变化量」
    • 拖动非叶节点时,「拖动的距离」会分给「子节点」,越宽的子节点 会分到更多的距离
  • 使用 columnResize 时, columnResize 总是会算出一个列宽数组 sizes,并将其作为作为每一个叶子节点的实际宽度
    • 如果你提供了 options.sizes,则使用该数组作为 sizes
    • 否则使用 pipeline 内部的非受控状态作为 sizes,你可以通过 options.defaultSizes 指定非受控状态的默认值
    • 当 sizes 数组过短时(例如表格实际包含 4 列,但 sizes 的长度只有 2),会使用 column.width 来进行填充,如果某一列没有设置 width,则使用 options.fallbackSize 来填充宽度。
    • 使用 columnResize 后, BaseTableProps#defaultColumnWidth 会失效
    • 总之,在拖动之前,对于 columnResize 来说,所有的列的宽度都是已知的
  • 拖动时,一列的宽度只能在 options.minSizeoptions.maxSize 之间

默认情况下,把手是透明的,你可以通过 options.handleBackground 来为把手设置背景色。