S2

@antv/s2-react-components

S2 提供开箱即用的维度切换组件 <Switcher/>, 借助它，你可以非常方便的实现交互式行列切换，以及维度隐藏的功能。

快速上手

点击查看 Switcher 维度配置

const switcherFields = {
  rows: {
    items: [{ id: "province" }, { id: "city" }],
    allowEmpty: false,
  },
  columns: {
    items: [{ id: "type" }],
  },
  values: {
    selectable: true,
    items: [{ id: "price" }, { id: "cost" }],
  },
};

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

const onSubmit = (result) => {
  console.log("result:", result);
};

const App = () => {
  return (
    <Switcher {...switcherFields} onSubmit={onSubmit} />,
  )
}

配置解释

维度配置

提示

Switcher 可接收三种类型的维度配置，分别是 rows，columns 和 values, 它们的类型皆为 SwitcherField。

其中 rows 和 columns 两个维度可以相互拖拽到彼此的配置框中，而 values 只能在自己的配置框中更改字段顺序。

通过传入 sheetType 以及维度配置，Switcher 的展示形态也会有所不同：

一种维度（主要用于明细表）	三种维度（主要用于透视表）

可选中

每个维度默认只能进行拖拽排序, 如果你希望能控制其字段的显隐，可以设置 selectable: true, 该属性用于开启字段的 checkbox :

const field = {
  selectable: true,
  items: [
    /*...*/
  ],
};

展开子项

如果维度中的每一个字段项还存在关联子项，可以设置 expandable:true, 该属性用于控制子项是否被展开，也可以进一步设置 expandText 定制展开 checkbox 的提示文字：

const field = {
  expandable: true,
  expandText: "展开同环比", // 默认：展开子项
  items: [
    /*...*/
  ],
};

允许为空

如果当前维度在移动交互中需要至少保留一个子项不能被拖拽出去，可以设置 allowEmpty:false, 该属性用于控制维度是否可以将全部子项拖出到其他维度：

const field = {
  allowEmpty: false, // 默认：true
  items: [
    /*...*/
  ],
};

allowEmpty

提交修改

Switcher 组件在弹窗关闭后会触发 onSubmit 回调，且此回调会接收一个 SwitcherResult 类型的参数，你可以通过该回调拿到修改后的结果。

所有结果会按维度分组，并且每一组字段会扁平化后按按顺序排序，你可以通过以下示例查看详细的结果数据类型。

注意

出于减少内部状态过时的考虑，Switcher 组件内部并不会持久化操作后状态。也就是说在每次弹窗关闭后，Switcher 内部状态会清空，再次打开时还是以组件 props 中的各个维度配置为准。

定制化

如果 Switcher 组件内置的触发按钮不满足你的需求，可通过 title 和 icon 定制化触发按钮，也可以自定义 children

import { SwapOutlined } from '@ant-design/icons';

<Switcher title="维度切换" icon={<SwapOutlined/> }/>

<Switcher>
  <Button size="small">自定义入口</Button>
</Switcher>

Switcher 组件也提供了 resetText 属性用于定义重置按钮的问题

Switcher 组件的弹出层基于 antd 的 Popover 开发，支持透传 Popover 配置项, 进行弹出层的自定义，比如 触发方式, 箭头指向, 卡片弹出方向 等

<Switcher popover={{ arrowPointAtCenter: true }} />

🎨 Switcher 组件详细的配置参考 Switcher Props 文档。

示例

结合透视表使用

提示

行列值可以相互移动
指标值可以控制显隐

结合明细表使用

提示

列头可以控制显隐
表格列头对应出现展开图标

📊 查看更多维度切换示例。