diff --git a/README.md b/README.md index d2ad0f4..8b747ee 100644 --- a/README.md +++ b/README.md @@ -133,7 +133,7 @@ $ npm start |defaultEditable |boolean |optional |false | 10.4.16 |默认开启行编辑模式| |useListActionBar |boolean |optional |false | 10.5.0 |新版listActionBar开关,actionBar配置,详细[见此](#actionbar)| |getTooltipContainer |function() |optional |null | 10.5.2 |单元格编辑状态下,tooltip位置可控 -|columnResizeable |boolean |optional |false | 10.5.3 |表格列可拖拽 +|columnResizeable |boolean |optional |true | 10.5.3 |表格列可拖拽 ### 折叠展开专用 diff --git a/src/Header/HeaderCell.jsx b/src/Header/HeaderCell.jsx index c561c75..45ecd08 100644 --- a/src/Header/HeaderCell.jsx +++ b/src/Header/HeaderCell.jsx @@ -239,18 +239,32 @@ class HeaderCell extends React.Component { } return null; } - onDrag = (e, node, column) => { - const changeWidth = node.lastX - this.state.lastColumnWidth; - this.props.handleColumnResize(e, changeWidth, column, node.node) + onDrag = (e, data, column) => { + const changeWidth = data.lastX - this.state.lastColumnWidth; + // console.log(data.lastX, this.state.lastColumnWidth, changeWidth) + + this.props.handleColumnResize(e, changeWidth, column, data.node) this.setState({ - lastColumnWidth: node.lastX + lastColumnWidth: data.lastX }) } + needResize(column) { + const { columnResizeable, last } = this.props + return columnResizeable + && column.type !== 'treeIcon' + && column.type !== 'checkboxSelector' + && column.type !== 'radioSelector' + // && !column.fixed + && !column.rightFixed + && !column.hidden + && !last + } + render() { const me = this; const { - renderModel, prefixCls, column, index, hasGroup, last, tablePrefixCls, columnResizeable + renderModel, prefixCls, column, index, hasGroup, last, tablePrefixCls } = me.props; const rowSelectorInTreeMode = (['checkboxSelector', 'radioSelector'].indexOf(column.type) !== -1) && (renderModel === 'tree'); @@ -321,19 +335,13 @@ class HeaderCell extends React.Component { {me.renderFilterIcon(column)} { - columnResizeable - && column.type !== 'treeIcon' - && column.type !== 'checkboxSelector' - && column.type !== 'radioSelector' - // && !column.fixed - && !column.rightFixed - && !column.hidden - && !last + + this.needResize(column) ? {this.onDrag(e, dragNode, column)}} > -
+ : null }
diff --git a/src/prop.js b/src/prop.js index f13236a..7de2a04 100644 --- a/src/prop.js +++ b/src/prop.js @@ -66,7 +66,7 @@ const defaultProps = { showColumnPickerCheckAll: false, defaultEditable: false, getTooltipContainer: null, - columnResizeable: false, + columnResizeable: true, }; // http://facebook.github.io/react/docs/reusable-components.html diff --git a/src/style/Header.less b/src/style/Header.less index 7ab4982..8b907a5 100644 --- a/src/style/Header.less +++ b/src/style/Header.less @@ -29,6 +29,14 @@ margin-left: 4px; vertical-align: -1px; } +.@{__tablePrefixCls}-cell-resize-icon { + display: inline-block; + height: 50px; + background: rgba(0,0,0,0); + cursor: ew-resize; + position: absolute; + z-index: 99; +} .@{__tablePrefixCls}-header-item-filter-dropdown { box-shadow: @box-shadow-1;