mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 Packages Projects Releases Wiki Activity

Fix 2663 有 title 时表格 empty 样式错位 (#2679)

Browse Source 
* fix #2663

* fix #2663
This commit is contained in:
ddcat1115 2016-08-14 15:38:43 +08:00 committed by 偏右
parent a5585bff77
commit 6b0a3e129c
2 changed files with 27 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/table/Table.jsx
View File

@ -749,8 +749,8 @@ export default class Table extends React.Component {
} }
render() { render() {
const { style, className, ...restProps } = this.props; const { style, className, rowKey, ...restProps } = this.props;
const data = this.getCurrentPageData(); let data = this.getCurrentPageData();
let columns = this.renderRowSelection(); let columns = this.renderRowSelection();
const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false; const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
const locale = this.getLocale(); const locale = this.getLocale();
@ -767,27 +767,37 @@ export default class Table extends React.Component {
return newColumn; return newColumn;
}); });
let emptyText; let emptyText;
let emptyClass = ''; let emptyRowKey;
if (!data || data.length === 0) { if (!data || data.length === 0) {
emptyText = ( emptyText = (
<div className="ant-table-placeholder"> <div className="ant-table-placeholder">
{locale.emptyText} {locale.emptyText}
</div> </div>
); );
emptyClass = 'ant-table-empty'; columns.forEach((column, index) => {
columns[index].render = () => ({
children: !index ? emptyText : null,
props: {
colSpan: !index ? columns.length : 0,
},
});
});
emptyRowKey = 'key';
data = [{
[emptyRowKey]: 'empty',
}];
} }
let table = ( let table = (
<div> <RcTable {...restProps}
<RcTable {...restProps} data={data}
data={data} columns={columns}
columns={columns} className={classString}
className={classString} expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0}
expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0} expandIconAsCell={expandIconAsCell}
expandIconAsCell={expandIconAsCell} rowKey={emptyRowKey || rowKey}
/> />
{emptyText}
</div>
); );
// if there is no pagination or no data, // if there is no pagination or no data,
// the height of spin should decrease by half of pagination // the height of spin should decrease by half of pagination
@ -797,7 +807,7 @@ export default class Table extends React.Component {
const spinClassName = this.props.loading ? `${paginationPatchClass} ant-table-spin-holder` : ''; const spinClassName = this.props.loading ? `${paginationPatchClass} ant-table-spin-holder` : '';
table = <Spin className={spinClassName} spinning={this.props.loading}>{table}</Spin>; table = <Spin className={spinClassName} spinning={this.props.loading}>{table}</Spin>;
return ( return (
<div className={`${emptyClass} ${className} clearfix`} style={style}> <div className={`${className} clearfix`} style={style}>
{table} {table}
{this.renderPagination()} {this.renderPagination()}
</div> </div>

18
components/table/style/index.less
View File

@ -262,26 +262,12 @@
} }
} }
&-empty {
position: relative;
margin-bottom: 16px;
}
&-empty &-body {
height: 150px;
}
&-placeholder { &-placeholder {
height: 100px; height: 65px;
line-height: 100px; line-height: 65px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
color: #999; color: #999;
border-bottom: 1px solid @border-color-split;
position: absolute;
top: 50px;
left: 0;
width: 100%;
.anticon { .anticon {
margin-right: 4px; margin-right: 4px;
} }