table宽度自适应

build/Column.js

@@ -45,7 +45,6 @@ var Column = function (_Component) {
 }(_react.Component);
 
 Column.defaultProps = {
-  width: '200',
   ifshow: true
 };
 

build/ColumnManager.js

@@ -27,12 +27,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 //行控制管理
 
 var ColumnManager = function () {
-  function ColumnManager(columns, elements) {
+  function ColumnManager(columns, elements, originWidth) {
     _classCallCheck(this, ColumnManager);
 
     this._cached = {};
 
     this.columns = columns || this.normalize(elements);
+    this.originWidth = originWidth;
   }
 
   ColumnManager.prototype.isAnyColumnsFixed = function isAnyColumnsFixed() {
@@ -151,10 +152,13 @@ var ColumnManager = function () {
         };
         columns.forEach(function (column, index) {
           var defaultOpt = {
-            ifshow: true,
-            width: 200
-            //获取非固定列
-          };if (type == 'nofixed' && column.fixed) {
+            ifshow: true
+          };
+          if (!_this11.originWidth) {
+            defaultOpt.width = 200;
+          }
+          //获取非固定列
+          if (type == 'nofixed' && column.fixed) {
             return false;
           }
           var newColumn = _extends({}, defaultOpt, column);
@@ -210,15 +214,18 @@ var ColumnManager = function () {
   };
 
   ColumnManager.prototype.getColumnWidth = function getColumnWidth() {
-    var computeWidth = 0;
     var columns = this.groupedColumns();
-    columns.forEach(function (col) {
-      //如果列显示，固定列也要去掉
-      if (col.ifshow && !col.fixed) {
-        computeWidth += parseInt(col.width);
+    var res = { computeWidth: 0, lastShowIndex: 0 };
+    columns.forEach(function (col, index) {
+      //如果列显示
+      if (col.ifshow) {
+        res.computeWidth += parseInt(col.width);
+        if (!col.fixed) {
+          res.lastShowIndex = index;
+        }
       }
     });
-    return computeWidth;
+    return res;
   };
 
   ColumnManager.prototype.getLeftColumnsWidth = function getLeftColumnsWidth() {
@@ -257,20 +264,24 @@ var ColumnManager = function () {
     return this._cached[name];
   };
 
+  //todo 含有children的宽度计算
+
+
   ColumnManager.prototype._leafColumns = function _leafColumns(columns) {
     var _this15 = this;
 
     var leafColumns = [];
-    var parWidth = 0;
+
     columns.forEach(function (column) {
       if (!column.children) {
 
         var defaultOpt = {
-          ifshow: true,
-          width: 200
+          ifshow: true
         };
+        if (!_this15.originWidth) {
+          defaultOpt.width = 200;
+        }
         var newColumn = _extends({}, defaultOpt, column);
-        parWidth += newColumn.width;
         leafColumns.push(newColumn);
       } else {
         leafColumns.push.apply(leafColumns, _toConsumableArray(_this15._leafColumns(column.children)));

build/Table.js

@@ -157,7 +157,7 @@ var Table = function (_Component) {
 
     var expandedRowKeys = [];
     var rows = [].concat(_toConsumableArray(props.data));
-    _this.columnManager = new _ColumnManager2["default"](props.columns, props.children);
+    _this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth);
     _this.store = (0, _createStore2["default"])({ currentHoverKey: null });
 
     if (props.defaultExpandAllRows) {
@@ -258,10 +258,21 @@ var Table = function (_Component) {
   Table.prototype.computeTableWidth = function computeTableWidth() {
     //计算总表格宽度、根据表格宽度和各列的宽度和比较，重置最后一列
     this.contentWidth = this.contentTable.clientWidth; //表格宽度
-    this.computeWidth = this.columnManager.getColumnWidth();
+    //如果用户传了scroll.x按用户传的为主
+    var setWidthParam = this.props.scroll.x;
+    if (setWidthParam) {
+      if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
+        this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
+      } else {
+        this.contentWidth = parseInt(setWidthParam);
+      }
+    }
+    var computeObj = this.columnManager.getColumnWidth();
+    var lastShowIndex = computeObj.lastShowIndex;
+    this.computeWidth = computeObj.computeWidth;
     if (this.computeWidth < this.contentWidth) {
       var contentWidthDiff = this.contentWidth - this.computeWidth;
-      this.setState({ contentWidthDiff: contentWidthDiff });
+      this.setState({ contentWidthDiff: contentWidthDiff, lastShowIndex: lastShowIndex });
     }
   };
 
@@ -353,6 +364,7 @@ var Table = function (_Component) {
     return showHeader ? _react2["default"].createElement(_TableHeader2["default"], _extends({}, drop, dragBorder, {
       minColumnWidth: minColumnWidth,
       contentWidthDiff: contentWidthDiff,
+      lastShowIndex: this.state.lastShowIndex,
       clsPrefix: clsPrefix,
       rows: rows,
       contentTable: this.contentTable,
@@ -382,7 +394,7 @@ var Table = function (_Component) {
         children: column.title,
         drgHover: column.drgHover,
         fixed: column.fixed,
-        width: column.width ? column.width : 200
+        width: column.width
       };
       if (column.onHeadCellClick) {
         cell.onClick = column.onHeadCellClick;
@@ -566,9 +578,11 @@ var Table = function (_Component) {
 
   Table.prototype.getColGroup = function getColGroup(columns, fixed) {
     var cols = [];
-    var _state$contentWidthDi = this.state.contentWidthDiff,
-        contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi;
-
+    var _state = this.state,
+        _state$contentWidthDi = _state.contentWidthDiff,
+        contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
+        _state$lastShowIndex = _state.lastShowIndex,
+        lastShowIndex = _state$lastShowIndex === undefined ? 0 : _state$lastShowIndex;
 
     if (this.props.expandIconAsCell && fixed !== 'right') {
       cols.push(_react2["default"].createElement('col', {
@@ -588,7 +602,7 @@ var Table = function (_Component) {
     }
     cols = cols.concat(leafColumns.map(function (c, i, arr) {
       var width = c.width;
-      if (arr.length == i + 1) {
+      if (lastShowIndex == i) {
         width = parseInt(width) + contentWidthDiff;
       }
       return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width } });

build/TableHeader.js

@@ -216,7 +216,8 @@ var TableHeader = function (_Component) {
         dragborder = _props.dragborder,
         onMouseOut = _props.onMouseOut,
         contentWidthDiff = _props.contentWidthDiff,
-        fixed = _props.fixed;
+        fixed = _props.fixed,
+        lastShowIndex = _props.lastShowIndex;
 
     var attr = dragborder ? { id: 'u-table-drag-thead-' + this.theadKey } : {};
     return _react2["default"].createElement(
@@ -233,7 +234,7 @@ var TableHeader = function (_Component) {
             if (!fixed && da.fixed) {
               fixedStyle = clsPrefix + '-row-fixed-columns-in-body';
             }
-            if (arr.length == i + 1) {
+            if (lastShowIndex == i) {
               da.width = parseInt(da.width) + contentWidthDiff;
             }
             if (draggable) {

build/lib/sum.js

@@ -74,7 +74,7 @@ function sum(Table) {
           }
           return item;
         });
-        return _react2["default"].createElement(Table, _extends({}, _this.props, { loading: false, footerScroll: true, showHeader: false, columns: columns_sum, data: obj }));
+        return _react2["default"].createElement(Table, _extends({}, _this.props, { loading: false, footerScroll: true, showHeader: false, columns: columns_sum, data: obj, originWidth: true }));
       };
 
       _this.currentTreeFooter = function () {
@@ -126,7 +126,7 @@ function sum(Table) {
 
         var _sumArray = [_extends({ key: "sumData", showSum: "合计" }, _countObj)];
         columns[0] = _extends({}, columns[0], columns2);
-        return _react2["default"].createElement(Table, _extends({}, _this.props, { bordered: false, loading: false, footerScroll: true, showHeader: false, columns: columns, data: _sumArray }));
+        return _react2["default"].createElement(Table, _extends({}, _this.props, { bordered: false, loading: false, footerScroll: true, showHeader: false, columns: columns, data: _sumArray, originWidth: true }));
       };
 
       _this.getNodeItem = function (array, newArray) {

demo/demolist/Demo23.js

@@ -57,7 +57,7 @@ class Demo23 extends Component {
 
   render() {
     return <DragColumnTable columns={columns23} data={data23} bordered
-    draggable={true} 
+    dragborder={true} 
     />;
   }
 }

dist/demo.css

@@ -8424,7 +8424,10 @@ ul {
     background: #fff;
     position: relative; }
   .u-table-fixed-left .u-table-body-inner {
-    margin-right: -20px; }
+    margin-right: -20px;
+    padding-right: 20px; }
+  .u-table-fixed-header .u-table-fixed-left .u-table-body-inner {
+    padding-right: 0px; }
   .u-table-fixed-header .u-table-body-inner {
     height: 100%;
     overflow: scroll; }

src/Table.js

@@ -186,7 +186,11 @@ class Table extends Component{
         if(typeof(setWidthParam)=='string' && setWidthParam.indexOf('%')){
           this.contentWidth = this.contentWidth * parseInt(setWidthParam) /100
         }else{
-          this.contentWidth = parseInt(setWidthParam);
+          let numSetWidthParam = parseInt(setWidthParam);
+          //若传入的宽度小于当前宽度以当前宽度为主。
+          if(numSetWidthParam > this.contentWidth){
+            this.contentWidth = numSetWidthParam;
+          }
         }
       }
       const computeObj = this.columnManager.getColumnWidth();

src/Table.scss

@@ -104,6 +104,11 @@ $table-move-in-color: $bg-color-base;
   }
   &-fixed-left &-body-inner {
     margin-right: -20px;
+    padding-right: 20px;
+  }
+
+   &-fixed-header &-fixed-left &-body-inner {
+    padding-right: 0px;
   }
 
   &-fixed-header &-body-inner {
@@ -111,6 +116,7 @@ $table-move-in-color: $bg-color-base;
     overflow: scroll;
   }
 
+
   &-fixed-header &-scroll &-header {
     overflow-x: scroll;
     padding-bottom: 20px;

src/TableHeader.js

@@ -153,7 +153,8 @@ class TableHeader extends Component{
     let  currentDom = document.getElementById("u-table-drag-thead-"+this.theadKey).getElementsByTagName("th")[this.drag.currIndex];
     currentDom.style.width = newWidth+"px"; 
     // this.contentTableWidth = newTableWidth;
-    contentTable.style.width = newTableWidth+'px';
+    let contentTableDom = document.getElementById("u-table-drag-thead-"+this.theadKey).parentNode;
+    contentTableDom.style.width = newTableWidth+'px';
     this.drag.x = x; 
 
   }

src/lib/dragColumnWidth.js

@@ -1,94 +0,0 @@
-import React, { Component } from "react";
-import {compare} from './util';
-import {ObjectAssign} from './util';
-/**
- * 参数: 列拖拽
- * @param {*} Table
- */
-// 0、定义一个拖拽dom
-// 1、当移动到表头可以显示当前操作列的move图标。
-//  2、添加start、move事件、drop事件
-export default function dragWidthColumn(Table) {
-
-  return class DragWidthColumn extends Component {
-
-    constructor(props) {
-      super(props);
-      this.state = {
-        columns:this.setColumOrderByIndex(props.columns)
-      };
-    }
-
-    componentWillReceiveProps(nextProps){
-      if(nextProps.columns != this.props.columns){
-        this.setState({
-          columns:this.setColumOrderByIndex(nextProps.columns)
-        })
-      }
-    }
- 
-    setColumOrderByIndex = (_column)=>{
-      _column.forEach((da,i) => {
-          da.dragIndex = i;
-          da.drgHover = false;
-      });
-      return _column; 
-    }
-
-
-    onDragStart=(event,data)=>{
-      if(this.props.onDragStart){
-        this.props.onDragStart(event,data)
-      }
-    }
-
-    onDragOver=(event,data)=>{
-      if(this.props.onDragOver){
-       this.props.onDragOver(event,data)
-      }
-    }
-
-    onDragEnter=(event,data)=>{
-     
-    }
-
-    onDrop=(event,data)=>{
-    
-    }
- 
-    getTarget=(evt)=>{
-        return evt.target || evt.srcElement;
-    }
-
-    render() {
-      const {
-          data,
-          dragborder,
-          draggable,
-          className,
-          columns,
-          onDragStart,
-          onDragEnter,
-          onDragOver,
-          onDrop,
-          ...others
-      } = this.props;
-      let key = new Date().getTime();
-      return (
-          <Table
-              {...others}
-              columns={this.state.columns}
-              data={data}
-              className={`${className} u-table-drag-border`}
-              onDragStart={this.onDragWidthStart}
-              onDragOver={this.onDragWidthOver}
-              onDrop={this.onDropWidth}
-              onDragEnter={this.onDragWidthEnter}
-              draggable={draggable}
-              // dragborder={dragborder}
-              dragborder={false}
-              dragborderKey={key}
-          />)
-    }
-  };
-}