diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less index 232d44ab699913b8f1e67ca758550b8f461c6c26..bfc8626b78e57cb1e3d237141b7e4881632bacbe 100644 --- a/components/apolloTable/component/Table.less +++ b/components/apolloTable/component/Table.less @@ -20,6 +20,7 @@ position: absolute; left: 0; z-index: 1; + overflow: hidden; } .centerContainer { display: flex; @@ -55,14 +56,13 @@ } .sideGrid { - overflow: hidden !important; + //overflow: hidden !important; outline: none; } .centerGrid { outline: none; } .bodyRow { - } .bodyCell { font-size: 20px; @@ -103,17 +103,34 @@ left: 0; right: 0; pointer-events: none; + z-index: 2; } .defaultEmpty { padding-top: 100px; } -.handleWidth{ +.widthHandleWrapper { + position: absolute; + cursor: ew-resize; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.4); + z-index: 20; + display: none; + .widthHandle { + position: absolute; + cursor: ew-resize; + width: 2px; + height: 100%; + background-color: rgb(33, 150, 243); + } +} +.handleWidth { position: absolute; - width: 10px; + width: 2px; height: 100%; bottom: 0; - right: -5px; - cursor: col-resize; + right: -1px; + cursor: ew-resize; z-index: 1; background: #ececec; } diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index a288775ce1757f768686eb07a7bf06e63c62fd1e..a93c99a4088054bef1482f9bdaafa8ab0298d6d2 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -3,7 +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 { Resizable, ResizableBox } from 'react-resizable'; import _ from 'lodash'; import scrollbarSize from 'dom-helpers/scrollbarSize'; import styles from './Table.less'; @@ -29,6 +29,7 @@ export default class AirTable extends Component { grid5: any; grid6: any; + tableContainer: any; memoizeData: Function; @@ -67,6 +68,8 @@ export default class AirTable extends Component { tableWidth: width, tableHeight: height, selectedCell: null, + showWidthHandle: false, + widthHandleLeft: 0, }; this.config = { overscanColumnCount: 5, @@ -218,6 +221,33 @@ export default class AirTable extends Component { // 列伸缩回调 onResizeWidth = (columnName: string, e, { size }) => { + let originLeft = + this.tableContainer && this.tableContainer.offsetParent.offsetParent.offsetParent.style.paddingLeft; + if (originLeft) { + originLeft = originLeft.replace(/[a-zA-Z]/gi, ''); + } else { + originLeft = 0; + } + this.setState({ + widthHandleLeft: e.x - originLeft, + }); + }; + // 列伸缩开始 + onResizeWidthStart = (columnName: string, e, { size }) => { + let originLeft = + this.tableContainer && this.tableContainer.offsetParent.offsetParent.offsetParent.style.paddingLeft; + if (originLeft) { + originLeft = originLeft.replace(/[a-zA-Z]/gi, ''); + } else { + originLeft = 0; + } + this.setState({ + showWidthHandle: true, + widthHandleLeft: e.x - originLeft, + }); + }; + // 列伸缩结束 + onResizeWidthStop = (columnName: string, e, { size }) => { const { columns } = this.state; const newColumns: any = []; columns.map((item) => { @@ -229,6 +259,7 @@ export default class AirTable extends Component { this.setState( { columns: newColumns, + showWidthHandle: false, }, () => { this.grid1 && this.grid1.recomputeGridSize(); @@ -259,20 +290,22 @@ export default class AirTable extends Component { requiredFlag, } = showColumns[columnIndex]; return ( - { - e.stopPropagation(); - }} - /> - } - onResize={this.onResizeWidth.bind(this, columnName)} - draggableOpts={{ enableUserSelectHack: false }} - > -
+
+ { + e.stopPropagation(); + }} + /> + } + // onResize={this.onResizeWidth.bind(this, columnName)} + // onResizeStart={this.onResizeWidthStart.bind(this, columnName)} + onResizeStop={this.onResizeWidthStop.bind(this, columnName)} + draggableOpts={{ enableUserSelectHack: false }} + > { icon={icon} required={requiredFlag} /> -
- + +
); }; @@ -383,7 +416,7 @@ export default class AirTable extends Component { render() { const { loading, noDataPlaceholder, loadComp } = this.props; - const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state; + const { columns, dataSource, tableWidth = 0, tableHeight = 0, showWidthHandle, widthHandleLeft } = this.state; const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight } = this.config; const scrollbarWidth = scrollbarSize() || 0; const showColumns = this.memoizeColumns(columns); @@ -428,6 +461,9 @@ export default class AirTable extends Component { style={{ paddingRight: this.props.onScroll ? paddingRight : 0, }} + ref={(dom) => { + this.tableContainer = dom; + }} > {totalWidth > tableWidth && leftCount > 0 && (
{ columns: showColumns, showColumns: leftColumns, })} + onScroll={(...arg: Array) => { + onScroll(...arg); + this.onScroll(arg[0]); + }} columnCount={leftCount} - width={leftWidth} + width={leftWidth + scrollbarWidth} rowHeight={rowHeight} rowCount={rowCount} height={totalHeight - scrollbarWidth} @@ -569,6 +609,7 @@ export default class AirTable extends Component { onScroll(...arg); this.onScroll(arg[0]); }} + scrollTop={scrollTop} height={totalHeight} cellRenderer={this.renderBodyCell.bind(this, { showColumns, @@ -671,6 +712,12 @@ export default class AirTable extends Component {
{loading && (loadComp ? loadComp : )}
+
+
+
); }} diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index 3373debccc367d0de458a012920fa9c8a79a328c..25ec7d0fa0f4963b89bc440d97824bf7afdc9eb3 100644 --- a/components/apolloTable/component/interface.tsx +++ b/components/apolloTable/component/interface.tsx @@ -79,6 +79,8 @@ export interface TableState { tableHeight?: number; tableWidth?: number; selectedCell?: any; + showWidthHandle: boolean; + widthHandleLeft: number; } export interface CommonProps extends TableProps { operateConfig?: OperateConfigProps; @@ -120,7 +122,7 @@ export interface CellProps { contentMenu?: any; selectedCell?: any; changeSelectedCell?: Function; - position:string; + position: string; } export interface EditCellProps {