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;