govtable

@aligov/components-gov-table

数政业务table

扩展 @alifd/next 的 table，增加如自定义列和 action bar 等功能

Install

tnpm i @aligov/components-gov-table -S

普通使用

可以使用 fusion table 的写法来实现其原支持的所有功能，如：

<Table hasBorder dataSource={dataSource}>
  <Table.Column title="Id" dataIndex="id"/>
  <Table.Column title="Time" dataIndex="time" cell={renderTime}/>
</Table>

扩展用法

扩展用法不能直接使用 <Table.Column /> 的方式来生命列，需要使用 columns prop 来配置列，这个属性实际就是列属性的数组, 更多配置参考 Table.Column 的 prop。

| 属性 | 说明 | 类型 | 默认值 | |------------------------|----------------------------------------------------------------------|---------------------|--------| | columns | 配置表格列，数组中的每一项的基本和 Table.Column 的一致 | Array | | | showColumnPicker | 是否展示自定义列 | boolean | false | | columnPickerStorageKey | 设定 key 来支持保存到 localStorage 中，建议使用 'page.module' 的形式 | string | '' | | actionBar | 表格上方的操作栏内容，填写任何合法的 react 元素 | ReactNode | null | | supportFullscreen | TODO: 表格支持全屏展示 | boolean | false | | verticalAlign | 单元格垂直方向的对其方式，支持 baseline、top、middle 和 bottom | string | 'top' | | style | 给最外层元素添加样式 | object | {} | | className | 给最外层元素添加 class 属性 | string | '' |

columns

columns 用来配置表格列。

columns: Array<ColumnConfig>

ColumnConfig 是每一列的属性配置，基本上和 <Table.Column /> 上的 prop 一致，所以下面只列出比较特殊的属性。

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | key | column 的 key 属性，供 react 区分使用 | string | | | group | 表明是 Table.ColumnGroup 元素，同时作为 group 的 title | string | | | groupHeader | 表明是 Table.GroupHeader 元素 | boolean | | | groupFooter | 表明是 Table.GroupFooter 元素 | boolean | | | type | 用来简化常用的类型的字段的渲染，如日期、时间、金钱可选值：'id', 'money', 'date', 'datetime' | Enum | | | children | 主要是配合 group 来达到多表头 的目的 | Array | |

获取 key 的优先级是 key > title > dataIndex > group

不同 type 下的渲染

如果有 dataIndex 属性，有 type 属性，切无 cell 属性，那么会根据 type 来做渲染。如果 type 不在枚举里，那么不做任何变更。

id

渲染结果包在 span.cell-nowrap 里，不折行。

money

配合对应行数据里的 currency 字段来格式化金钱为形如 123,456.78 (CNY) 的形式，格式化使用的工具是 @alife/whale-util 里提供的 formatAmount(value, currency, config)。

渲染结果包在 span.cell-money 元素里，不折行。

额外配合属性：

• appendCurrency: {boolean}，用来控制展示结果是否添加形如 (CNY) 的后缀。默认情况下，不是空字符串且有 currency 字段值，将自动添加后缀。如果需要禁用，显示地设置 appendCurrency: false

date / datetime

type 是 date 或 datetime 的区别是默认的时间格式化方式，前者是 YYYY-MM-DD，后者是 YYYY-MM-DD HH:mm:ss，都可通过 format 属性来取代默认的格式化方式。

渲染结果包在 span.cell-datetime 元素里，不折行。

额外配合属性：

• format: {string}，取代默认的格式化方式，合法的格式化字符串参考 momentjs#format。

enum

适用于对于一系列选择类型的枚举值，接口返回的是值，但需要展示为可读文案，这个方法用于简化这种情况的渲染。

额外配合属性：

• enums: {Array}，数据源，默认要求数组元素的格式至少包含 { label, value }，其中 label 是文案，value 是模型的值。如果不是这种命名，那么需要配置 labelKey 或 valueKey
• labelKey: 数据源中表示文案的 key
• valueKey: 数据源中表示值的 key