表组件
上一篇
CellData
下一篇
维度下钻
Loading...
基于 @antv/s2 封装的 React 版开箱即用的组件 <SheetComponent />
import { SheetComponent } from '@antv/s2-react';import '@antv/s2-react/dist/s2-react.min.css';<SheetComponent sheetType="pivot" />
功能描述： React SheetComponent 组件的 props 参数
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| sheetType | 表格类型： 1. pivot: 透视表 2. table: 明细表 3. gridAnalysis: 网格分析表 4. strategy: 趋势分析表 5. editable: 编辑表 | pivot | table | gridAnalysis | strategy | editable | pivot | |
| spreadsheet | 自定义表 | (container: HTMLElement | string, dataCfg: S2DataConfig, options: SheetComponentOptions) => SpreadSheet | ||
| dataCfg | 透视表数据映射相关配置项 | S2DataConfig | ✓ | |
| options | 透视表属性配置项 | SheetComponentOptions | ✓ | |
| partDrillDown | 维度下钻相关属性 | PartDrillDown | ||
| adaptive | 是否根据窗口大小自适应 | boolean | { width?: boolean, height?: boolean, getContainer: () => HTMLElement } | false | |
| themeCfg | 自定义透视表主题样式 | ThemeCfg | ||
| loading | 控制表格的加载状态 | boolean | ||
| header | 表头配置项 | HeaderCfgProps | ||
| onRangeSort | 组内排序时触发回调事件 | (params: SortParam[] ) => void; | ||
| onRowCellHover | 行头鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| onRowCellClick | 行头鼠标单击事件 | (data: TargetCellInfo) => void | ||
| onRowCellDoubleClick | 行头鼠标双击事件 | (data: TargetCellInfo) => void | ||
| onRowCellContextMenu | 行头右键菜单事件 | (data: TargetCellInfo) => void | ||
| onRowCellMouseDown | 行头鼠标按下事件 | (data: TargetCellInfo) => void | ||
| onRowCellMouseUp | 行头鼠标放开事件 | (data: TargetCellInfo) => void | ||
| onRowCellMouseMove | 行头鼠标移动事件 | (data: TargetCellInfo) => void | ||
| onRowCellCollapsed | 节点展开/收起事件回调 | ({ isCollapsed: boolean, collapseFields: Record<string, boolean>, node: Node }) => void; | ||
| onRowCellAllCollapsed | 节点全部展开/收起的事件回调 | (isCollapsed: boolean ) => void; | ||
| onRowCellScroll | 行头单元格滚动事件 | ({position: CellScrollPosition} ) => void; | ||
| onRowCellRender | 行头单元格渲染事件 | ( cell: Cell ) => void | ||
| onRowCellSelected | 行头单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| onColCellHover | 列头鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| onColCellClick | 列头鼠标单击事件 | (data: TargetCellInfo) => void | ||
| onColCellDoubleClick | 列头鼠标双击事件 | (data: TargetCellInfo) => void | ||
| onColCellContextMenu | 列头右键菜单事件 | (data: TargetCellInfo) => void | ||
| onColCellMouseDown | 列头鼠标按下事件 | (data: TargetCellInfo) => void | ||
| onColCellMouseUp | 列头鼠标松开事件 | (data: TargetCellInfo) => void | ||
| onColCellMouseMove | 列头鼠标移动事件 | (data: TargetCellInfo) => void | ||
| onColCellExpanded | 开启隐藏列头（tooltip.operation.hiddenColumns = true）后，列头展开的事件回调 | (expandedNode: Node) => void; | ||
| onColCellHidden | 开启隐藏列头（tooltip.operation.hiddenColumns = true）后，列头隐藏的事件回调 | ( data: { currentHiddenColumnsInfo:HiddenColumnsInfo; hiddenColumnsDetail:HiddenColumnsInfo[]} ) => void; | ||
| onColCellRender | 列头单元格渲染事件 | ( cell: Cell ) => void | ||
| onColCellSelected | 列头单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| onDataCellHover | 数值单元格鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| onDataCellClick | 数值单元格鼠标点击事件 | (data: TargetCellInfo) => void | ||
| onDataCellDoubleClick | 数值单元格双击事件 | (data: TargetCellInfo) => void | ||
| onDataCellContextMenu | 数值单元格右键菜单事件 | (data: TargetCellInfo) => void | ||
| onDataCellMouseDown | 数值单元格鼠标按下事件 | (data: TargetCellInfo) => void | ||
| onDataCellMouseUp | 数值单元格鼠标松开事件 | (data: TargetCellInfo) => void | ||
| onDataCellMouseMove | 数值单元格鼠标移动事件 | (data: TargetCellInfo) => void | ||
| onDataCellBrushSelection | 数值单元格刷选事件 | ( dataCells: DataCell[] ) => void | ||
| onDataCellSelectMove | 数值单元格键盘方向键移动事件 | (metas: CellMeta[]) => void | ||
| onDataCellEditStart | 数值单元格编辑开始（暂只支持编辑表） | (meta: ViewMeta, cell: S2CellType) => void | ||
| onDataCellEditEnd | 数值单元格编辑完成（暂只支持编辑表） | (meta: ViewMeta, cell: S2CellType) => void | ||
| onDataCellRender | 数值单元格渲染事件 | ( cell: Cell ) => void | ||
| onDataCellSelected | 数值单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| onCornerCellHover | 角头鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| onCornerCellClick | 角头鼠标单击事件 | (data: TargetCellInfo) => void | ||
| onCornerCellDoubleClick | 角头鼠标双击事件 | (data: TargetCellInfo) => void | ||
| onCornerCellContextMenu | 角头右键菜单事件 | (data: TargetCellInfo) => void | ||
| onCornerCellMouseUp | 角头鼠标按下事件 | (data: TargetCellInfo) => void | ||
| onCornerCellMouseUp | 角头鼠标松开事件 | (data: TargetCellInfo) => void | ||
| onCornerCellMouseMove | 角头鼠标移动事件 | (data: TargetCellInfo) => void | ||
| onCornerCellRender | 角头单元格渲染事件 | ( cell: Cell ) => void | ||
| onCornerCellSelected | 角头单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| onMergedCellsHover | 合并单元格鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsClick | 合并单元格鼠标点击事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsDoubleClick | 合并单元格鼠标双击事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsContextMenu | 合并单元格右键菜单事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsMouseDown | 合并单元格按下事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsMouseUp | 合并单元格松开事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsMouseMove | 合并单元格移动事件 | (data: TargetCellInfo) => void | ||
| onMergedCellsRender | 合并单元格渲染事件 | ( cell: Cell ) => void | ||
| onSeriesNumberCellRender | 序号单元格渲染事件 | ( cell: Cell ) => void | ||
| onRangeSort | 组内排序时触发回调事件（暂只支持透视表） | (params: SortParam[] ) => void; | ||
| onRangeSorted | 组内排序结束触发回调事件（暂只支持透视表） | (event: FederatedPointerEvent ) => void; | ||
| onRangeFilter | 筛选时触发回调事件 | (data: { filterKey: string; filteredValues: string[] } ) => void; | ||
| onRangeFiltered | 筛选结束触发回调事件 | (data: DataType[] ) => void; | ||
| onLayoutCellRender | 单个单元格布局渲染完成事件 | cell: S2CellType | ||
| onLayoutAfterHeaderLayout | 表头布局结构准备完成事件 | (layoutResult: LayoutResult ) => void; | ||
| onLayoutPagination | 分页事件 | ({ pageSize: number; pageCount: number; total: number; current: number;} ) => void; | ||
| onLayoutCellScroll | 单元格滚动事件 (已废弃，请使用 onScroll 代替) | ({position: CellScrollPosition} ) => void; | ||
| onLayoutAfterCollapseRows | 树状模式下收起行头后的事件回调 | ({ collapseFields: Record<string, boolean>, meta: Node }) => void; | ||
| onBeforeRender | 开始 render 前的事件 | () => void; | ||
| onAfterRender | render 完成的事件 | () => void; | ||
| onMounted | 组件层表格挂载完成事件，可拿到表实例 详情 | (spreadsheet: SpreadSheet) => void; | ||
| onUpdate | 组件层表格更新事件，当 数据 (S2DataConfig) 或 配置 (S2Options) 更新时触发，可手动控制更新时的 渲染模式 | (renderOptions: S2RenderOptions) => S2RenderOptions | void | ||
| onUpdateAfterRender | 组件层表格更新事件，当 数据 (S2DataConfig) 或 配置 (S2Options) 更新时，并且在重渲染 s2.render() 完成后触发 | (renderOptions: S2RenderOptions) => void | ||
| onLoading | 组件层加载状态变更事件 | (loading: boolean) => void | ||
| onDestroy | 表格销毁事件 | () => void; | ||
| onLayoutResize | 表格整体 changeSize 事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeSeriesWidth | 表格序号行宽事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeRowWidth | 行头单元格宽度更改事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeRowHeight | 行头单元格高度更改事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeColWidth | 列头单元格宽度更改事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeColHeight | 列头单元格高度更改事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeTreeWidth | 树状行头整体宽度更改事件 | (params: ResizeParams) => void; | ||
| onLayoutResizeMouseDown | resize 热区鼠标按下事件 | ( event: MouseEvent, resizeInfo?: ResizeInfo) => void; | ||
| onLayoutResizeMouseUp | resize 热区鼠标松开事件 | ( event: MouseEvent, resizeInfo?: ResizeInfo) => void; | ||
| onLayoutResizeMouseMove | resize 热区鼠标移动事件 | ( event: MouseEvent, resizeInfo?: ResizeInfo) => void; | ||
| onKeyBoardDown | 键盘按下事件 | (event: KeyboardEvent) => void | ||
| onKeyBoardUp | 键盘松开事件 | (event: KeyboardEvent) => void | ||
| onCopied | 复制事件 | (data: CopyableList) => void | ||
| onActionIconHover | 行头操作 icon 悬停事件 | (event: FederatedPointerEvent) => void | ||
| onActionIconClick | 行头操作 icon 点击事件 | (event: FederatedPointerEvent) => void | ||
| onContextMenu | 右键单元格单击事件 (禁用右键菜单不生效？) | (event: FederatedPointerEvent) => void | ||
| onMouseHover | 表格鼠标悬停事件 | (event: FederatedPointerEvent) => void | ||
| onMouseUp | 表格鼠标松开事件 | (event: FederatedPointerEvent) => void | ||
| onSelected | 单元格选中事件 | (cells: Cell[], detail: CellSelectedDetail ) => void | ||
| onReset | 交互状态重置事件 | (event: KeyboardEvent) => void | ||
| onLinkFieldJump | 链接字段跳转事件 | (data: { field: string; meta: Node | ViewMeta; record: Data }) => void | ||
| onScroll | 单元格滚动事件 （含行头和数值单元格） | ({position: CellScrollPosition} ) => void | ||
| onColCellBrushSelection | 批量选中刷选范围内的列头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息 | (cells: ColCell[]) => void; | ||
| onRowCellBrushSelection | 批量选中刷选范围内的行头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: RowCell[]) => void; |
@antv/s2-react 组件的 options 继承于 S2Options , 有两点不同：
S2Options 变更为 SheetComponentOptions.Element | string 变为了 ReactNode, 即可以是任意的 jsx 元素。import type { S2Options } from '@antv/s2';type SheetComponentOptions = S2Options<React.ReactNode>
@antv/s2-vue 现已停止维护，由于精力投入有限，出于维护成本，包下载量等因素综合考虑，从 2.0.0 正式版后不再继续更新，请基于 @antv/s2 自行封装，或 fork 仓库进行二次开发社区版本。
基于 @antv/s2 层封装的 Vue 3.0 版开箱即用的组件 <SheetComponent />
功能描述： Vue SheetComponent 组件的 props，如 <SheetComponent :sheetType="pivot" />
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| sheetType | 表格类型： 1. pivot: 透视表 2. table: 明细表 3. editable: 编辑表 | pivot | table | editable | pivot | |
| dataCfg | 透视表数据映射配置项 | S2DataConfig | ✓ | |
| options | 透视表属性配置项 | SheetComponentOptions | ✓ | |
| adaptive | 是否根据窗口大小自适应 | boolean | { width?: boolean, height?: boolean, getContainer: () => HTMLElement } | false | |
| showPagination | 是否显示默认分页 （只有在 options 配置过 pagination 属性才会生效） | boolean | { onShowSizeChange?: (pageSize: number) => void, onChange?: (current: number) => void } | false | |
| themeCfg | 自定义表格主题样式 | ThemeCfg | ||
| loading | 控制表格的加载状态 | boolean |
功能描述： Vue SheetComponent 组件的 events，<SheetComponent @rowCellClick="handleRowCellClick" />
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| spreadsheet | 自定义表 | (container: HTMLElement | string, dataCfg: S2DataConfig, options: SheetComponentOptions) => SpreadSheet | ||
| rangeSort | 组内排序时触发回调事件 | (params: SortParam[] ) => void; | ||
| rowCellClick | 行头鼠标单击事件 | (data: TargetCellInfo) => void | ||
| rowCellHover | 行头鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| rowCellClick | 行头鼠标单击事件 | (data: TargetCellInfo) => void | ||
| rowCellDoubleClick | 行头鼠标双击事件 | (data: TargetCellInfo) => void | ||
| rowCellContextMenu | 行头右键菜单事件 | (data: TargetCellInfo) => void | ||
| rowCellMouseDown | 行头鼠标按下事件 | (data: TargetCellInfo) => void | ||
| rowCellMouseUp | 行头鼠标放开事件 | (data: TargetCellInfo) => void | ||
| rowCellMouseMove | 行头鼠标移动事件 | (data: TargetCellInfo) => void | ||
| rowCellCollapseTreeRows | 树状结构下点击行头收起展开按钮 | (params: { id: number; isCollapsed: boolean; node: Node }) => void | ||
| rowCellScroll | 行头单元格滚动事件 | ({position: CellScrollPosition} ) => void; | ||
| rowCellCollapsed | 节点展开/收起事件回调 | ({ isCollapsed: boolean, collapseFields: Record<string, boolean>, node: Node }) => void; | ||
| rowCellAllCollapsed | 节点全部展开/收起的事件回调 | (isCollapsed: boolean ) => void; | ||
| rowCellRender | 行头单元格渲染事件 | ( cell: Cell ) => void | ||
| rowCellSelected | 行头单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| colCellHover | 列头鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| colCellClick | 列头鼠标单击事件 | (data: TargetCellInfo) => void | ||
| colCellDoubleClick | 列头鼠标双击事件 | (data: TargetCellInfo) => void | ||
| colCellContextMenu | 列头右键菜单事件 | (data: TargetCellInfo) => void | ||
| colCellMouseDown | 列头鼠标按下事件 | (data: TargetCellInfo) => void | ||
| colCellMouseUp | 列头鼠标松开事件 | (data: TargetCellInfo) => void | ||
| colCellMouseMove | 列头鼠标移动事件 | (data: TargetCellInfo) => void | ||
| colCellExpanded | 开启隐藏列头（tooltip.operation.hiddenColumns = true）后，列头展开的事件回调 | (expandedNode: Node) => void | ||
| colCellHidden | 开启隐藏列头（tooltip.operation.hiddenColumns = true）后，列头隐藏的事件回调 | (data: { currentHiddenColumnsInfo:HiddenColumnsInfo; hiddenColumnsDetail:HiddenColumnsInfo[] } ) => void; | ||
| colCellRender | 列头单元格渲染事件 | ( cell: Cell ) => void | ||
| colCellSelected | 列头单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| dataCellHover | 数值单元格鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| dataCellClick | 数值单元格鼠标点击事件 | (data: TargetCellInfo) => void | ||
| dataCellDoubleClick | 数值单元格双击事件 | (data: TargetCellInfo) => void | ||
| dataCellContextMenu | 数值单元格右键菜单事件 | (data: TargetCellInfo) => void | ||
| dataCellMouseDown | 数值单元格鼠标按下事件 | (data: TargetCellInfo) => void | ||
| dataCellMouseUp | 数值单元格鼠标松开事件 | (data: TargetCellInfo) => void | ||
| dataCellMouseMove | 数值单元格鼠标移动事件 | (data: TargetCellInfo) => void | ||
| dataCellBrushSelection | 数值单元格刷选事件 | (brushRangeDataCells: DataCell[] ) => void | ||
| dataCellScroll | 数值单元格滚动事件 | ({position: CellScrollPosition} ) => void; | ||
| dataCellSelected | 数值单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| cornerCellHover | 角头鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| cornerCellClick | 角头鼠标单击事件 | (data: TargetCellInfo) => void | ||
| cornerCellDoubleClick | 角头鼠标双击事件 | (data: TargetCellInfo) => void | ||
| cornerCellContextMenu | 角头右键菜单事件 | (data: TargetCellInfo) => void | ||
| cornerCellMouseUp | 角头鼠标按下事件 | (data: TargetCellInfo) => void | ||
| cornerCellMouseUp | 角头鼠标松开事件 | (data: TargetCellInfo) => void | ||
| cornerCellMouseMove | 角头鼠标移动事件 | (data: TargetCellInfo) => void | ||
| cornerCellRender | 角头单元格渲染事件 | ( cell: Cell ) => void | ||
| cornerCellSelected | 角头单元格选中事件 | ( cells: Cell[], detail: CellSelectedDetail ) => void | ||
| mergedCellsHover | 合并单元格鼠标悬停事件 | (data: TargetCellInfo) => void | ||
| mergedCellsClick | 合并单元格鼠标点击事件 | (data: TargetCellInfo) => void | ||
| mergedCellsDoubleClick | 合并单元格鼠标双击事件 | (data: TargetCellInfo) => void | ||
| mergedCellsContextMenu | 合并单元格右键菜单事件 | (data: TargetCellInfo) => void | ||
| mergedCellsMouseDown | 合并单元格按下事件 | (data: TargetCellInfo) => void | ||
| mergedCellsMouseUp | 合并单元格松开事件 | (data: TargetCellInfo) => void | ||
| mergedCellsMouseMove | 合并单元格移动事件 | (data: TargetCellInfo) => void | ||
| mergedCellsRender | 合并单元格渲染事件 | ( cell: Cell ) => void | ||
| seriesNumberCellRender | 序号单元格渲染事件 | ( cell: Cell ) => void | ||
| rangeSort | 组内排序时触发回调事件（暂只支持透视表） | (params: SortParam[] ) => void; | ||
| rangeSorted | 组内排序结束触发回调事件（暂只支持透视表） | (event: FederatedPointerEvent ) => void; | ||
| rangeFilter | 筛选时触发回调事件 | (data: { filterKey: string; filteredValues: string[] } ) => void; | ||
| rangeFiltered | 筛选结束触发回调事件 | (data: DataType[] ) => void; | ||
| layoutAfterHeaderLayout | 表头布局结构准备完成事件 | (layoutResult: LayoutResult ) => void; | ||
| layoutPagination | 分页事件 | ({ pageSize: number; pageCount: number; total: number; current: number;} ) => void; | ||
| layoutCellScroll | 单元格滚动事件 (已废弃，请使用 onScroll 代替) | ({position: CellScrollPosition} ) => void; | ||
| beforeRender | 开始 render 前的事件 | () => void; | ||
| afterRender | render 完成的事件 | () => void; | ||
| mounted | 表格加载完成事件，可拿到表实例 详情 | (spreadsheet: SpreadSheet) => void; | ||
| update | 组件层表格更新事件，当 数据 (S2DataConfig) 或 配置 (S2Options) 更新时触发，可手动控制更新时的 渲染模式 | (renderOptions: S2RenderOptions) => S2RenderOptions | void | ||
| updateAfterRender | 组件层表格更新事件，当 数据 (S2DataConfig) 或 配置 (S2Options) 更新时，并且在重渲染 s2.render() 完成后触发 | (renderOptions: S2RenderOptions) => void | ||
| destroy | 表格销毁事件 | () => void; | ||
| layoutResize | 表格整体 changeSize 事件 | (params: ResizeParams) => void; | ||
| layoutResizeSeriesWidth | 表格序号行宽事件 | (params: ResizeParams) => void; | ||
| layoutResizeRowWidth | 行头单元格宽度更改事件 | (params: ResizeParams) => void; | ||
| layoutResizeRowHeight | 行头单元格高度更改事件 | (params: ResizeParams) => void; | ||
| layoutResizeColWidth | 列头单元格宽度更改事件 | (params: ResizeParams) => void; | ||
| layoutResizeColHeight | 列头单元格高度更改事件 | (params: ResizeParams) => void; | ||
| layoutResizeTreeWidth | 树状行头整体宽度更改事件 | (params: ResizeParams) => void; | ||
| layoutResizeMouseDown | resize 热区鼠标按下事件 | ( event: MouseEvent, resizeInfo?: ResizeInfo) => void; | ||
| layoutResizeMouseUp | resize 热区鼠标松开事件 | ( event: MouseEvent, resizeInfo?: ResizeInfo) => void; | ||
| layoutResizeMouseMove | resize 热区鼠标移动事件 | ( event: MouseEvent, resizeInfo?: ResizeInfo) => void; | ||
| keyBoardDown | 键盘按下事件 | (event: KeyboardEvent) => void | ||
| keyBoardUp | 键盘松开事件 | (event: KeyboardEvent) => void | ||
| copied | 复制事件 | (data: CopyableList) => void | ||
| actionIconHover | 行头操作 icon 悬停事件 | (event: FederatedPointerEvent) => void | ||
| actionIconClick | 行头操作 icon 点击事件 | (event: FederatedPointerEvent) => void | ||
| contextMenu | 右键单元格单击事件 (禁用右键菜单不生效？) | (event: FederatedPointerEvent) => void | ||
| mouseHover | 表格鼠标悬停事件 | (event: FederatedPointerEvent) => void | ||
| mouseUp | 表格鼠标松开事件 | (event: FederatedPointerEvent) => void | ||
| selected | 单元格选中事件 | (cells: Cell[], detail: CellSelectedDetail ) => void | ||
| reset | 交互状态重置事件 | (event: KeyboardEvent) => void | ||
| linkFieldJump | 链接字段跳转事件 | (data: { field: string; meta: Node | ViewMeta; record: Data }) => void | ||
| scroll | 单元格滚动事件 （含行头和数值单元格） | ({position: CellScrollPosition} ) => void; | ||
| colCellBrushSelection | 批量选中刷选范围内的列头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息 | (cells: ColCell[]) => void; | ||
| rowCellBrushSelection | 批量选中刷选范围内的行头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: RowCell[]) => void; |
@antv/s2-vue 组件 的 options 继承于 S2Options , 有两点不同：
S2Options 变更为 SheetComponentOptions.antd-design-vue 的分页配置，即支持对 antd-vue 分页组件 的 api 透传。import type { Pagination, S2Options } from '@antv/s2';import type { PaginationProps } from 'ant-design-vue';type SheetComponentOptions = S2Options<Element | string,Pagination & PaginationProps>;
别名：GEvent
功能描述：交互回调函数的返回信息。
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| target | 交互作用对象 | S2CellType | ||
| event | AntV/G Event 事件 | FederatedPointerEvent | ||
| viewMeta | 当前节点信息 | Node |
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| sortFieldId | 度量 Id，即要被排序的 Id | string | - | ✓ |
| sortMethod | 排序方式 | ASC | DESC | asc | desc | - | |
| sortBy | 自定义排序列表 | string[] | - | |
| sortByMeasure | 按照度量值（数值）排序（透视表适用） | string | - | |
| query | 筛选条件，缩小排序范围 如 ：{city:'白山'} | Record<string, string> | - | |
| type | 组内排序用来显示 icon （透视表适用） | string | - | |
| sortFunc | 自定义排序的 function | (params: SortFuncParam) => string[] | - |
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| sortFieldId | 度量 Id，即要被排序的 Id | string | - | ✓ |
| sortMethod | 排序方式 | ASC | DESC | asc | desc | - | |
| sortBy | 自定义排序列表 | string[] | - | |
| sortByMeasure | 按照度量值（数值）排序（透视表适用） | string | - | |
| query | 筛选条件，缩小排序范围 如 ：{city:'白山'} | Record<string, string> | - | |
| type | 组内排序用来显示 icon（透视表适用） | string | - | |
| data | 当前排序数据列表 | Array<string | Record<string, any>> | - |
功能描述：单元格滚动的位置信息。
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| scrollX | 水平方向滚动偏移量（相对滚动条轨道长度） | number | ||
| scrollY | 垂直方向滚动偏移量（相对滚动条轨道长度） | number |
功能描述：开启 隐藏列头 后，隐藏列头的节点信息
功能描述：表格 resize（单元格行高列宽拖动变化）和单元格样式信息
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| info | resize 配置信息 | ResizeInfo | ||
| style | options 中样式相关配置 | style |
功能描述：表格 resize（ 单元格行高列宽拖动变化）配置信息
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| theme | resize 热区配置 | ResizeArea | ||
| type | resize 方向 | Horizontal | Vertical | ||
| offsetX | 横向偏移量 | number | ||
| offsetY | 纵向偏移量 | number | ||
| width | 拖拽的宽度 | number | ||
| height | 拖拽 | number | ||
| size | 热区尺寸 | number | ||
| effect | 拖拽更改影响的区域 | Field | Cell | Tree | Series | ||
| isResizeArea | 是否属于 resize 热区 | boolean | ||
| id | 字段 id | string | ||
| cell | resize 热区对应单元格信息 | Node | ||
| meta | resize 热区对应单元格元数据 | Node | ||
| resizedWidth | 拖拽后的宽度 | number | ||
| resizedHeight | 拖拽后的高度 | number |
功能描述：自定义渲染模式
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| reloadData | 是否重新加载数据 | boolean | ||
| rebuildDataSet | 是否重新生成数据集 | boolean | ||
| rebuildHiddenColumnsDetail | 是否重新生成列头隐藏信息 | boolean |
功能描述：数值单元格数据和位置等信息
| 参数 | 类型 | 必选 | 默认值 | 功能描述 |
|---|---|---|---|---|
| spreadsheet | SpreadSheet | 表格实例 | ||
| id | string | 单元格唯一标识 | ||
| x | number | 单元格 x 坐标 | ||
| y | number | 单元格 y 坐标 | ||
| width | number | 单元格宽度 | ||
| height | number | 单元格高度 | ||
| data | ViewMetaData | 单元格数据 | ||
| rowIndex | number | 单元格在行叶子节点中的索引 | ||
| colIndex | number | 单元格在列叶子节点中的索引 | ||
| valueField | string | 度量 id | ||
| fieldValue | DataItem | 度量展示的真实值 | ||
| isTotals | boolean | 是否为总计：true 为总计 false 为小计 | ||
| query | Record<string, any> | 行列查询条件 | ||
| rowQuery | Record<string, any> | 行查询条件 | ||
| colQuery | Record<string, any> | 列查询条件 | ||
| rowId | string | 单元格的行 id | ||
| colId | string | 单元格的列 id |
type RawData = Record<string, DataItem>;
type SimpleData = string | number | null | undefined;
功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：趋势分析表
| 配置项名称 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
values | 格式化后的数据，直接展示在 dataCfg 中 | SimpleData[][] | ✓ | |
originalValues | 原始数据，用于原始数据导出 | SimpleData[][] | ||
label | 用作单元格小标题，单独占一行展示 | string | ||
[key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown | `` |
{"number": {"originalValues": [1, 2, 3],"values": ["1", "2", "3"]}}
SimpleData | MultiData | MiniChartData
type DataItem = SimpleData | MultiData | MiniChartData | Record<string, unknown>;
{"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"}
import type { EXTRA_FIELD, VALUE_FIELD } from '@antv/s2';type ExtraData = {[EXTRA_FIELD]: string;[VALUE_FIELD]: string | DataItem;};
{"$$extra$$": "number","$$value$$": 7789,}
type Data = RawData & ExtraData;
CellData 定义type ViewMetaData = Data | CellData;
{"city": "杭州市"}
{"extraField": "number","raw": {"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"},"$$extra$$": "number","$$value$$": 7789,"$$origin$$": {"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"}}
功能描述：在单元格内绘制 mini 图（支持 折线图、子弹图、柱状图）. 查看 文档 和 示例
功能描述：内置折线图、柱状图数据配置项，数据格式参考 G2
| 参数 | 说明 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| type | mini 图类型 | line | bar | ✓ | |
| encode | 编码方式，声明 x 位置通道或 y 位置通道绑定的对应的列数据 | {x: string; y: string} | ✓ | |
| data | 原始数据 | Data[] | ✓ | |
| [key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown |
功能描述：内置子弹图数据配置项
| 参数 | 说明 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| type | mini 图类型 | bullet | ✓ | bullet |
| measure | 当前指标 | number | string | ✓ | |
| target | 目标值 | number | string | ✓ | |
| [key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown |
功能描述：数值单元格数据和位置等信息
| 参数 | 类型 | 必选 | 默认值 | 功能描述 |
|---|---|---|---|---|
| spreadsheet | SpreadSheet | 表格实例 | ||
| id | string | 单元格唯一标识 | ||
| x | number | 单元格 x 坐标 | ||
| y | number | 单元格 y 坐标 | ||
| width | number | 单元格宽度 | ||
| height | number | 单元格高度 | ||
| data | ViewMetaData | 单元格数据 | ||
| rowIndex | number | 单元格在行叶子节点中的索引 | ||
| colIndex | number | 单元格在列叶子节点中的索引 | ||
| valueField | string | 度量 id | ||
| fieldValue | DataItem | 度量展示的真实值 | ||
| isTotals | boolean | 是否为总计：true 为总计 false 为小计 | ||
| query | Record<string, any> | 行列查询条件 | ||
| rowQuery | Record<string, any> | 行查询条件 | ||
| colQuery | Record<string, any> | 列查询条件 | ||
| rowId | string | 单元格的行 id | ||
| colId | string | 单元格的列 id |
type RawData = Record<string, DataItem>;
type SimpleData = string | number | null | undefined;
功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：趋势分析表
| 配置项名称 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
values | 格式化后的数据，直接展示在 dataCfg 中 | SimpleData[][] | ✓ | |
originalValues | 原始数据，用于原始数据导出 | SimpleData[][] | ||
label | 用作单元格小标题，单独占一行展示 | string | ||
[key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown | `` |
{"number": {"originalValues": [1, 2, 3],"values": ["1", "2", "3"]}}
SimpleData | MultiData | MiniChartData
type DataItem = SimpleData | MultiData | MiniChartData | Record<string, unknown>;
{"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"}
import type { EXTRA_FIELD, VALUE_FIELD } from '@antv/s2';type ExtraData = {[EXTRA_FIELD]: string;[VALUE_FIELD]: string | DataItem;};
{"$$extra$$": "number","$$value$$": 7789,}
type Data = RawData & ExtraData;
CellData 定义type ViewMetaData = Data | CellData;
{"city": "杭州市"}
{"extraField": "number","raw": {"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"},"$$extra$$": "number","$$value$$": 7789,"$$origin$$": {"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"}}
功能描述：在单元格内绘制 mini 图（支持 折线图、子弹图、柱状图）. 查看 文档 和 示例
功能描述：内置折线图、柱状图数据配置项，数据格式参考 G2
| 参数 | 说明 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| type | mini 图类型 | line | bar | ✓ | |
| encode | 编码方式，声明 x 位置通道或 y 位置通道绑定的对应的列数据 | {x: string; y: string} | ✓ | |
| data | 原始数据 | Data[] | ✓ | |
| [key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown |
功能描述：内置子弹图数据配置项
| 参数 | 说明 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| type | mini 图类型 | bullet | ✓ | bullet |
| measure | 当前指标 | number | string | ✓ | |
| target | 目标值 | number | string | ✓ | |
| [key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown |
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| linkFields | 标记字段为链接样式，用于外链跳转 | string[] | (meta: Node | ViewMeta) => boolean | ||
| selectedCellsSpotlight | 是否开启选中高亮聚光灯效果 | boolean | false | |
| hoverHighlight | 鼠标悬停时高亮当前单元格，以及所对应的行头，列头 | boolean | true | |
| hoverFocus | 鼠标悬停在当前单元格超过默认 800ms 后，保持当前高亮，显示 tooltip，悬停时间通过设置 duration 来控制 | boolean | {duration: number} | true | |
| hiddenColumnFields | 用于配置默认隐藏的列，透视表 和多列头明细表 需要配置列头唯一 id, 单列头明细表 配置列头 field 字段即可 （即：s2DataConfig.fields.columns). 了解更多 | string[] | ||
| copy | 单元格复制配置 | Copy | ||
| customInteractions | 自定义交互 详情 | CustomInteraction[] | ||
| scrollSpeedRatio | 用于控制滚动速率，分水平和垂直两个方向，默认为 1 | ScrollSpeedRatio | ||
| autoResetSheetStyle | 用于控制点击表格外区域和按下 ESC 键时是否重置交互状态和关闭 Tooltip, 支持根据 event 动态判断 | boolean | (event: Event | FederatedPointerEvent, spreadsheet: SpreadSheet) => boolean | true | |
| resize | 用于控制 resize 热区是否显示 | boolean | ResizeInteractionOptions | true | |
| brushSelection | 是否允许单元格（包含行头，列头，数值单元格）刷选。行头，列头刷选只支持透视表 | boolean | BrushSelection | true | |
| multiSelection | 是否允许多选 （包含行头，列头，数值单元格） | boolean | true | |
| rangeSelection | 是否允许区间快捷多选 | boolean | true | |
| scrollbarPosition | 用于控制滚动条展示在内容区边缘还是画布边缘 | content | canvas | content | |
| eventListenerOptions | 事件监听函数 addEventListener 的 可选项配置, 可控制事件从冒泡阶段还是捕获阶段触发 | false | ||
| selectedCellHighlight | 选中数值单元格后的行列高亮联动 rowHeader：选中数值单元格后高亮对应行头 colHeader：选中数值单元格后高亮对应列头 currentRow：选中数值单元格后高亮整行 currentCol：选中数值单元格后高亮整列 true：同 { rowHeader: true, colHeader: true, currentRow: true, currentCol: true } | boolean | { rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean } | false | |
| overscrollBehavior | 控制滚动至边界的行为，可禁用浏览器的默认滚动行为。详情 | auto | contain | none | null | auto |
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| enable | 是否允许复制 | boolean | true | |
| withFormat | 是否使用 s2DataConfig 的 formatter 格式复制数据 | boolean | true | |
| withHeader | 复制数据是否带表头信息 | boolean | false | |
| customTransformer | 复制时支持自定义 (transformer) 数据格式化方法 | (transformer: Transformer) => Partial<Transformer> | transformer |
功能描述：自定义交互，继承 BaseEvent: 查看示例
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| key | 交互的唯一标识 | string | ✓ | |
| interaction | 交互实例 | InteractionConstructor | ✓ |
功能描述：滚动速率配置。查看示例
interface ScrollSpeedRatio {horizontal?: number; // 水平滚动速率，默认为 1vertical?: number; // 垂直滚动速率，默认为 1}
功能描述：宽高调整配置。查看示例
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| rowCellVertical | 是否开启行头垂直方向 resize 热区 | boolean | true | |
| cornerCellHorizontal | 是否开启角头水平方向 resize 热区 | boolean | true | |
| colCellHorizontal | 是否开启列头水平方向 resize 热区 | boolean | true | |
| colCellVertical | 是否开启列头垂直方向 resize 热区 （列头隐藏时该配置无效） | boolean | true | |
| rowResizeType | 用于控制行高 resize 时的生效范围 1. all: 对所有单元格生效（会覆盖默认的行高配置），2. current: 对当前单元格生效，3. selected: 对当前单元格生效，如果单元格是多选状态，调整任意选中单元格，对所有选中的生效。 | all| current | selected | current | |
| colResizeType | 用于控制列宽 resize 时的生效范围 1. all: 对所有单元格生效（会覆盖默认的列宽配置），2. current: 对当前单元格生效，3. selected: 对当前单元格生效，如果单元格是多选状态，调整任意选中单元格，对所有选中的生效。 | all| current | selected | current | |
| disable | 用于控制行高 resize 是否生效。查看示例 | (resizeInfo: S2CellType) => boolean | ||
| visible | 自定义当前单元格是否显示 resize 热区 | (cell: S2CellType) => boolean | ||
| minCellWidth | 单元格可拖拽最小宽度 | number | 40 | |
| minCellHeight | 单元格可拖拽最小高度 | number | 20 |
功能描述：单元格刷选配置。查看示例
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| dataCell | 是否允许数值单元格刷选 | boolean | true | |
| rowCell | 是否允许行头单元格刷选（仅支持透视表） | boolean | false | |
| colCell | 是否允许列头单元格刷选 | boolean | false |
功能描述：单元格选中信息明细。
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| interactionName | 触发选中的交互名 | InteractionName | ||
| targetCell | 触发选中的单元格 | S2CellType | ||
| event | 触发选中的事件对象 | FederatedPointerEvent | Event | KeyboardEvent |
功能描述：交互拦截类型。
enum InterceptType {HOVER = 'hover',CLICK = 'click',DATA_CELL_BRUSH_SELECTION = 'dataCellBrushSelection',ROW_CELL_BRUSH_SELECTION = 'rowCellBrushSelection',COL_CELL_BRUSH_SELECTION = 'colCellBrushSelection',MULTI_SELECTION = 'multiSelection',RESIZE = 'resize',}
功能描述：交互名称。
enum InteractionName {CORNER_CELL_CLICK = 'cornerCellClick',DATA_CELL_CLICK = 'dataCellClick',ROW_CELL_CLICK = 'rowCellClick',COL_CELL_CLICK = 'colCellClick',MERGED_CELLS_CLICK = 'mergedCellsClick',ROW_COLUMN_CLICK = 'rowColumnClick',HEADER_CELL_LINK_CLICK = 'headerCellLinkClick',HOVER = 'hover',DATA_CELL_BRUSH_SELECTION = 'dataCellBrushSelection',ROW_CELL_BRUSH_SELECTION = 'rowCellBrushSelection',COL_CELL_BRUSH_SELECTION = 'colCellBrushSelection',COL_ROW_RESIZE = 'rowColResize',DATA_CELL_MULTI_SELECTION = 'dataCellMultiSelection',ROW_CELL_MULTI_SELECTION = 'rowCellMultiSelection',COL_CELL_MULTI_SELECTION = 'colCellMultiSelection',RANGE_SELECTION = 'rangeSelection',SELECTED_CELL_MOVE = 'selectedCellMove',GLOBAL_RESET = 'globalReset',}
功能描述：交互状态名称。
enum InteractionStateName {ALL_SELECTED = 'allSelected',SELECTED = 'selected',ROW_CELL_BRUSH_SELECTED = 'rowCellBrushSelected',COL_CELL_BRUSH_SELECTED = 'colCellBrushSelected',DATA_CELL_BRUSH_SELECTED = 'dataCellBrushSelected',UNSELECTED = 'unselected',HOVER = 'hover',HOVER_FOCUS = 'hoverFocus',HIGHLIGHT = 'highlight',SEARCH_RESULT = 'searchResult',PREPARE_SELECT = 'prepareSelect',}
功能描述：单元格类型。
enum CellType {DATA_CELL = 'dataCell',ROW_CELL = 'rowCell',COL_CELL = 'colCell',SERIES_NUMBER_CELL = 'seriesNumberCell',CORNER_CELL = 'cornerCell',MERGED_CELL = 'mergedCell',}