列高亮

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

示例#

预览点击展开或收拢

职务	人数			年龄			占比		占比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.columnHover())

  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.columnHover())

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

使用方式#

pipeline.use(features.columnHover(options))

options 结构如下：

export interface ColumnHoverFeatureOptions {  /** 鼠标悬停的颜色，默认为 'var(--hover-bgcolor)' */  hoverColor?: string
  /** 非受控用法：默认的 colIndex */  defaultHoverColIndex?: number
  /** 受控用法：当前鼠标悬停列的下标（colIndex) */  hoverColIndex?: number
  /** 受控用法：colIndex 改变的回调 */  onChangeHoverColIndex?(nextColIndex: number): void}