diff --git a/docs/api.md b/docs/api.md index 4dff4ef..cb6a63b 100644 --- a/docs/api.md +++ b/docs/api.md @@ -134,9 +134,12 @@ import 'bee-table/build/Table.css'; | $\color{red}{*}$bgColor | 列背景颜色 | string | - | | $\color{red}{*}$titleAlign | 标题对齐方式 | 'left'\|'center'\|'right' | 'left' | | $\color{red}{*}$contentAlign | 内容对齐方式 | 'left'\|'center'\|'right' | 'left' | -| $\color{red}{*}$required | 必填项,展示红色星号 | bool | false | +| $\color{red}{*}$required | 必填项,列标题展示红色星号 | bool | false | + #### [新增]fieldType -fieldType属性控制了不同类型数据的渲染方式,其优先级低于render属性。目前,已有`string`,`number`,`currency`,`bool`,`link`类型,支持自定义配置。 + +fieldType属性控制了不同类型数据的渲染方式,其优先级低于render属性。目前,已有`string`,`number`,`currency`,`bool`,`link`,`date`类型,支持自定义配置(`string`类型为默认类型)。 + - numberConfig |具体属性|说明|类型|默认值| @@ -179,6 +182,15 @@ fieldType属性控制了不同类型数据的渲染方式,其优先级低于rend *desc和descIndex属性相比,desc优先级更高* +- dateConfig + +|具体属性|说明|类型|默认值| +|:--|:---|:--|:---| +|moment|传入的moment对象,必需|object|-| +|format|渲染的时间格式|string|'YYYY-MM-DD'| + +*需要单独安装[moment.js](http://momentjs.cn/),并将moment对象传入* + ### 高阶函数 Table内部封装了七个高阶组件,接收基础 Table 组件作为输入,输出一个新的复杂 Table 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。 diff --git a/src/TableCell.js b/src/TableCell.js index 65c9ff6..661e850 100644 --- a/src/TableCell.js +++ b/src/TableCell.js @@ -108,7 +108,12 @@ class TableCell extends Component{ ; } - + // 渲染时间类型 + renderDate = ( data, config={}) => { + const { moment, format } = config; + if(!moment)return data; + return moment(data).format(format || 'YYYY-MM-DD'); + } render() { const { record, indentSize, clsPrefix, indent, @@ -164,6 +169,10 @@ class TableCell extends Component{ text = this.renderNumber(text, {...config,...column.numberConfig}, column.width); break; } + case 'date':{ + text = this.renderDate(text, column.dateConfig); + break; + } default : { break; } @@ -198,7 +207,7 @@ class TableCell extends Component{ else if(column.textAlign){ className = className+` text-${column.textAlign}`; } - if(typeof text == 'string' && bodyDisplayInRow){ + if((typeof text == 'string' || typeof text === 'number') && bodyDisplayInRow){ title = text } if(expandIcon && expandIcon.props.expandable){