列范围高亮

鼠标悬停在表格上时，高亮单元格所在的列与相应的表头。

示例#

预览点击展开或收拢

职务	人数			年龄			占比		占比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 列高亮() {
  const dataSource = assets.biz.dataSource6
  const columns = assets.biz.columns6
  const pipeline = useTablePipeline({ components: fusion })
    .input({ dataSource, columns })
    .use(features.columnRangeHover())

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

function 列高亮() {
  const dataSource = assets.biz.dataSource6
  const columns = assets.biz.columns6
  const pipeline = useTablePipeline({ components: fusion })
    .input({ dataSource, columns })
    .use(features.columnRangeHover())

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

使用方式#

pipeline.use(features.columnRangeHover(options))

options 结构如下：

export interface ColumnRangeHoverFeatureOptions {  /** 鼠标悬停时单元格的背景色，默认为 'var(--hover-bgcolor)' */  hoverColor?: string
  /** 鼠标悬停时表头的背景色，默认为 'var(--header-hover-bgcolor)' */  headerHoverColor?: string
  /** 非受控用法：默认的悬停范围 */  defaultHoverRange?: HoverRange
  /** 受控用法：当前悬停范围 */  hoverRange?: HoverRange
  /** 受控用法：悬停渲染改变的回调 */  onChangeHoverRange?(nextColIndexRange: HoverRange): void}
export type HoverRange = {  start: number  end: number}