diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index 41fcdadeed929f52c8406f5cf8cd7f1079c7a37f..f9f734155e9c7f788afac332780840e75df03e0d 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -30,6 +30,8 @@ export default class AirTable extends Component { grid6: any; tableContainer: any; + widthHandleWrapper: any; + widthHandle: any; memoizeData: Function; @@ -68,8 +70,6 @@ export default class AirTable extends Component { tableWidth: width, tableHeight: height, selectedCell: null, - showWidthHandle: false, - widthHandleLeft: 0, }; this.config = { overscanColumnCount: 5, @@ -220,31 +220,19 @@ 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; + onResizeWidth = (e) => { + const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0; + if (this.widthHandle) { + this.widthHandle.style.left = `${e.x - originLeft}px`; } - 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; + onResizeWidthStart = (e) => { + const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0; + if (this.widthHandleWrapper && this.widthHandle) { + this.widthHandleWrapper.style.display = 'block'; + this.widthHandle.style.left = `${e.x - originLeft}px`; } - this.setState({ - showWidthHandle: true, - widthHandleLeft: e.x - originLeft, - }); }; // 列伸缩结束 onResizeWidthStop = (columnName: string, e, { size }) => { @@ -256,10 +244,12 @@ export default class AirTable extends Component { } newColumns.push(item); }); + if (this.widthHandleWrapper) { + this.widthHandleWrapper.style.display = 'none'; + } this.setState( { columns: newColumns, - showWidthHandle: false, }, () => { this.grid1 && this.grid1.recomputeGridSize(); @@ -301,8 +291,8 @@ export default class AirTable extends Component { }} /> } - // onResize={this.onResizeWidth.bind(this, columnName)} - // onResizeStart={this.onResizeWidthStart.bind(this, columnName)} + onResize={this.onResizeWidth} + onResizeStart={this.onResizeWidthStart} onResizeStop={this.onResizeWidthStop.bind(this, columnName)} draggableOpts={{ enableUserSelectHack: false }} > @@ -418,7 +408,7 @@ export default class AirTable extends Component { render() { const { loading, noDataPlaceholder, loadComp } = this.props; - const { columns, dataSource, tableWidth = 0, tableHeight = 0, showWidthHandle, widthHandleLeft } = this.state; + const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state; const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight } = this.config; const scrollbarWidth = scrollbarSize() || 0; const showColumns = this.memoizeColumns(columns); @@ -716,9 +706,16 @@ export default class AirTable extends Component {
{ + this.widthHandleWrapper = dom; + }} > -
+
{ + this.widthHandle = dom; + }} + />
); diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index 04c331ace4ac3c3ae158fd472dd02ec768153a54..1b10d4a008895cd7054852efd8bcfb3ad5744816 100644 --- a/components/apolloTable/component/interface.tsx +++ b/components/apolloTable/component/interface.tsx @@ -80,8 +80,6 @@ export interface TableState { tableHeight?: number; tableWidth?: number; selectedCell?: any; - showWidthHandle: boolean; - widthHandleLeft: number; } export interface CommonProps extends TableProps { operateConfig?: OperateConfigProps;