S2

React 维度切换组件 @antv/s2-react-components

import { Switcher } from '@antv/s2-react-components';
import '@antv/s2-react-components/dist/s2-react-components.min.css'

<Switcher />

Switcher 组件 Props

属性	说明	类型	默认值	必选
rows	行头配置描述	SwitcherField
columns	列头配置描述	SwitcherField
values	指标配置描述	SwitcherField
disabled	是否禁用	`boolean`	`false`
title	自定义标题	`ReactNode`	`行列切换`
icon	自定义图标	`ReactNode`	`<SwapOutlined />`
children	自定义打开切换弹窗的触发节点	`ReactNode`	`<Button />`
contentTitleText	弹窗默认标题文字	`string`	`行列切换`
resetText	重置按钮文字	`string`	`恢复默认`
innerContentClassName	弹出框内容样式名	`string`
allowExchangeHeader	是否允许指标在行列维度之间相互切换	`boolean`		`true`
onSubmit	关闭弹窗后，处理行列切换结果的回调函数	`(result:` SwitcherResult`) => void`
popover	弹窗配置，透传给 `antd` 的 `Popover` 组件	PopoverProps

SwitcherField

行列头以及指标值的配置描述对象

属性	说明	类型	默认值	必选
items	配置字段对象	SwitcherItem`[]`	-	✓
expandable	是否打开展开子项的 checkbox 用于控制展开和隐藏子项	`boolean`	`false`
expandText	展开子项的 checkbox 对应的文字	`string`	`展开子项`
selectable	是否打开字段的 checkbox 用于控制显隐	`boolean`	`false`
allowEmpty	当前维度是否可以将全部子项拖出	`boolean`	`true`

SwitcherItem

配置字段对象

属性	说明	类型	默认值	必选
id	字段 id	`string`	-	✓
displayName	字段显示名字，该字段不存在时直接显示 id	`string`	-
checked	字段是否需要显示	`boolean`	`true`
children	如果字段存在关联子项（如：同环比），使用该属性配置子项	SwitcherItem`[]`	`[]`

SwitcherResult

关闭弹窗后，处理行列切换结果的回调函数的参数

属性	说明	类型	默认值	必选
rows	所有行头字段操作结果	SwitcherResultItem
columns	所有列头字段操作结果	SwitcherResultItem
values	所有指标字段操作结果	SwitcherResultItem

SwitcherResultItem

关闭弹窗后，每个维度结果的描述对象

属性	说明	类型	默认值	必选
items	全部字段的被扁平化集合，按拖拽后顺序排序	SwitcherItem`[]`	`[]`
hideItems	所有需要隐藏字段被扁平化的集合，按拖拽后顺序排序	SwitcherItem`[]`	`[]`

SwitcherCfgProps

内置 header 组件配置参数，本质上是 Switcher 组件 Props 的子集

属性	说明	类型	默认值	必选
sheetType	表格类型	`pivot`
title	打开切换弹窗的触发节点	`ReactNode`
contentTitleText	弹窗默认标题文字	`string`	行列切换
resetText	重置按钮文字	`string`	恢复默认
innerContentClassName	弹出框内容样式名	`string`
popover	弹窗配置，透传给 `antd` 的 `Popover` 组件	PopoverProps
disabled	是否禁用	`boolean`	`false`