Skip to content

S
submodule
Commit 6f2e5aeb authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

add react-resizeable

parent 34441bae
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 28 deletions
components/apolloTable/component/Table.less
View file @ 6f2e5aeb
......@@ -107,3 +107,13 @@
.defaultEmpty {
padding-top: 100px;
}
.handleWidth{
position: absolute;
width: 10px;
height: 100%;
bottom: 0;
right: -5px;
cursor: col-resize;
z-index: 1;
background: #ececec;
}
components/apolloTable/component/Table.tsx
View file @ 6f2e5aeb
......@@ -3,6 +3,7 @@ import classNames from 'classnames';
import memoizeOne from 'memoize-one';
import { Empty, Spin } from 'antd';
import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
import { Resizable } from 'react-resizable';
import _ from 'lodash';
import scrollbarSize from 'dom-helpers/scrollbarSize';
import styles from './Table.less';
......@@ -215,6 +216,31 @@ export default class AirTable extends Component<TableProps, TableState> {
});
};
// 列伸缩回调
onResizeWidth = (columnName: string, e, { size }) => {
const { columns } = this.state;
const newColumns: any = [];
columns.map((item) => {
if (item.columnName === columnName) {
item.width = size.width;
}
newColumns.push(item);
});
this.setState(
{
columns: newColumns,
},
() => {
this.grid1 && this.grid1.recomputeGridSize();
this.grid2 && this.grid2.recomputeGridSize();
this.grid3 && this.grid3.recomputeGridSize();
this.grid4 && this.grid4.recomputeGridSize();
this.grid5 && this.grid5.recomputeGridSize();
this.grid6 && this.grid6.recomputeGridSize();
},
);
};
// 渲染表头
renderHeaderCell = (
{ showColumns, position }: { showColumns: ColumnProps[]; position?: string },
......@@ -233,23 +259,37 @@ export default class AirTable extends Component<TableProps, TableState> {
requiredFlag,
} = showColumns[columnIndex];
return (
<div className={styles.headerCell} key={key} style={style}>
<Column
columnType={String(columnType)}
columnName={columnName}
columnChsName={columnChsName}
columnAttrObj={columnAttrObj}
sortFlag={sortFlag}
sortConfig={sortConfig}
columnIndex={columnIndex}
showIndex={position === 'right' ? false : showIndex}
questionText={questionText}
rowSelection={position === 'right' ? false : rowSelection}
dataSource={dataSource}
icon={icon}
required={requiredFlag}
/>
</div>
<Resizable
width={style.width}
handle={
<span
className={styles.handleWidth}
onClick={(e) => {
e.stopPropagation();
}}
/>
}
onResize={this.onResizeWidth.bind(this, columnName)}
draggableOpts={{ enableUserSelectHack: false }}
>
<div className={styles.headerCell} key={key} style={style}>
<Column
columnType={String(columnType)}
columnName={columnName}
columnChsName={columnChsName}
columnAttrObj={columnAttrObj}
sortFlag={sortFlag}
sortConfig={sortConfig}
columnIndex={columnIndex}
showIndex={position === 'right' ? false : showIndex}
questionText={questionText}
rowSelection={position === 'right' ? false : rowSelection}
dataSource={dataSource}
icon={icon}
required={requiredFlag}
/>
</div>
</Resizable>
);
};
......@@ -537,16 +577,16 @@ export default class AirTable extends Component<TableProps, TableState> {
})}
/>
) : (
columnCount > 0 &&
!loading && (
<Empty
className={styles.defaultEmpty}
description={
noDataPlaceholder || locale.empty
}
/>
)
)}
columnCount > 0 &&
!loading && (
<Empty
className={styles.defaultEmpty}
description={
noDataPlaceholder || locale.empty
}
/>
)
)}
</div>
}
</div>
......@@ -628,7 +668,9 @@ export default class AirTable extends Component<TableProps, TableState> {
</div>
)}
<div className={styles.fillHandleWrapper} />
<div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>{loading && (loadComp ? loadComp : <Spin />)}</div>
<div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>
{loading && (loadComp ? loadComp : <Spin />)}
</div>
</div>
);
}}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment