@aligov/components-gov-table NPM

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