拖拽调整列宽

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

示例#

预览点击展开或收拢

职务	人数			年龄			占比		占比2
职务	2014年	2015年	同比增长	2014年	2015年	同比增长	2014年	2015年	2014年	2015年

UED	104	168	50	30	32	15	0.3	0.45	0.3	0.45
客服	104	168	50	30	32	15	0.3	0.45	0.3	0.45
产品	104	168	50	30	32	15	0.3	0.45	0.3	0.45
运营	104	168	50	30	32	15	0.3	0.45	0.3	0.45
前端	104	168	50	30	32	15	0.3	0.45	0.3	0.45
数据	104	168	50	30	32	15	0.3	0.45	0.3	0.45

源码点击展开或收拢

function Demo() {
  const dataSource = assets.biz.dataSource6
  const columns = assets.biz.columns6

  const pipeline = useTablePipeline({ components: fusion })
    .input({ dataSource, columns })
    .use(
      features.columnResize({
        fallbackSize: 120,
        handleBackground: '#ddd',
        handleHoverBackground: '#aaa',
        handleActiveBackground: '#89bff7',
      }),
    )

  return <BaseTable {...pipeline.getProps()} />
}

function Demo() {
  const dataSource = assets.biz.dataSource6
  const columns = assets.biz.columns6

  const pipeline = useTablePipeline({ components: fusion })
    .input({ dataSource, columns })
    .use(
      features.columnResize({
        fallbackSize: 120,
        handleBackground: '#ddd',
        handleHoverBackground: '#aaa',
        handleActiveBackground: '#89bff7',
      }),
    )

  return <BaseTable {...pipeline.getProps()} />
}

使用方式#

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.minSize 至 options.maxSize 之间

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