解决全选功能,和下面选中不撇配的问题

build/Table.css

@@ -70,7 +70,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1900;
+  z-index: 1600;
   opacity: .7;
   filter: blur(0.5px);
   background-color: #fff; }

build/lib/newMultiSelect.js

@@ -37,7 +37,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
  */
 
 function newMultiSelect(Table, Checkbox) {
-  var _class, _temp;
+  var _class, _temp, _initialiseProps;
 
   return _temp = _class = function (_Component) {
     _inherits(NewMultiSelect, _Component);
@@ -47,105 +47,59 @@ function newMultiSelect(Table, Checkbox) {
 
       var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-      _this.onAllCheckChange = function () {
+      _initialiseProps.call(_this);
-        var _this$state = _this.state,
-            data = _this$state.data,
-            checkedAll = _this$state.checkedAll;
-
-        var selectList = [];
-        var check = checkedAll ? false : true;
-        data.forEach(function (item) {
-          item._checked = check;
-          if (item._checked) {
-            selectList.push(item);
-          }
-        });
-        _this.setState({
-          checkedAll: check
-        });
-        _this.props.getSelectedDataFunc(selectList);
-      };
-
-      _this.handleClick = function () {};
-
-      _this.onCheckboxChange = function (text, record, index) {
-        return function () {
-          var data = _this.state.data;
-
-          var selectList = [];
-          record._checked = record._checked ? false : true;
-          var checkedAll = true;
-          for (var i = 0; i < data.length; i++) {
-            var item = data[i];
-            if (!item._checked || item._checked == false) {
-              checkedAll = false;
-              break;
-            }
-          }
-          _this.setState(_extends({}, _this.state, {
-            checkedAll: checkedAll
-          }));
-          data.forEach(function (da) {
-            if (da._checked) {
-              selectList.push(da);
-            }
-          });
-          _this.props.getSelectedDataFunc(selectList);
-        };
-      };
-
-      _this.getDefaultColumns = function (columns) {
-        // let checkedAll = init?false:this.state.checkedAll;
-        var checkedAll = _this.state.checkedAll;
-
-        var _defaultColumns = [{
-          title: _react2["default"].createElement(Checkbox, {
-            className: 'table-checkbox',
-            checked: checkedAll
-            // indeterminate={indeterminate_bool && !this.state.checkedAll}
-            , onChange: _this.onAllCheckChange
-          }),
-          key: "checkbox",
-          dataIndex: "checkbox",
-          fixed: "left",
-          width: 50,
-          render: function render(text, record, index) {
-            var attr = {};
-            record._disabled ? attr.disabled = record._disabled : "";
-            return _react2["default"].createElement(Checkbox, _extends({
-              key: index,
-              className: 'table-checkbox'
-            }, attr, {
-              checked: record._checked,
-              onClick: _this.handleClick,
-              onChange: _this.onCheckboxChange(text, record, index)
-            }));
-          }
-        }];
-        return _defaultColumns.concat(columns);
-      };
 
+      var checkedAll = _this.setChecked(props.data);
       _this.state = {
-        checkedAll: false,
+        checkedAll: checkedAll,
-        // columns:this.getDefaultColumns(props.columns,"init"),
         data: (0, _util.ObjectAssign)(props.data)
       };
       return _this;
     }
 
     NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-      // if(this.props.columns != nextProps.columns){
-      //   this.setState({
-      //     columns:this.getDefaultColumns(nextProps.columns)
-      //   })
-      // }
       if (this.props.data != nextProps.data) {
         this.setState({
-          data: (0, _util.ObjectAssign)(nextProps.data)
+          data: (0, _util.ObjectAssign)(nextProps.data),
+          checkedAll: this.setChecked(nextProps.data)
         });
       }
     };
 
+    NewMultiSelect.prototype.setChecked = function setChecked(data) {
+      var allCheck = true;
+      if (data) {
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var da = _step.value;
+
+            if (!da._checked) {
+              allCheck = false;
+              break;
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator["return"]) {
+              _iterator["return"]();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+      }
+      return allCheck;
+    };
+
     NewMultiSelect.prototype.render = function render() {
       var columns = this.props.columns;
       var data = this.state.data;
@@ -156,6 +110,86 @@ function newMultiSelect(Table, Checkbox) {
     return NewMultiSelect;
   }(_react.Component), _class.defaultProps = {
     prefixCls: "u-table-mult-select"
+  }, _initialiseProps = function _initialiseProps() {
+    var _this2 = this;
+
+    this.onAllCheckChange = function () {
+      var _state = _this2.state,
+          data = _state.data,
+          checkedAll = _state.checkedAll;
+
+      var selectList = [];
+      var check = checkedAll ? false : true;
+      data.forEach(function (item) {
+        item._checked = check;
+        if (item._checked) {
+          selectList.push(item);
+        }
+      });
+      _this2.setState({
+        checkedAll: check
+      });
+      _this2.props.getSelectedDataFunc(selectList);
+    };
+
+    this.handleClick = function () {};
+
+    this.onCheckboxChange = function (text, record, index) {
+      return function () {
+        var data = _this2.state.data;
+
+        var selectList = [];
+        record._checked = record._checked ? false : true;
+        var checkedAll = true;
+        for (var i = 0; i < data.length; i++) {
+          var item = data[i];
+          if (!item._checked || item._checked == false) {
+            checkedAll = false;
+            break;
+          }
+        }
+        _this2.setState(_extends({}, _this2.state, {
+          checkedAll: checkedAll
+        }));
+        data.forEach(function (da) {
+          if (da._checked) {
+            selectList.push(da);
+          }
+        });
+        _this2.props.getSelectedDataFunc(selectList);
+      };
+    };
+
+    this.getDefaultColumns = function (columns) {
+      // let checkedAll = init?false:this.state.checkedAll;
+      var checkedAll = _this2.state.checkedAll;
+
+      var _defaultColumns = [{
+        title: _react2["default"].createElement(Checkbox, {
+          className: 'table-checkbox',
+          checked: checkedAll
+          // indeterminate={indeterminate_bool && !this.state.checkedAll}
+          , onChange: _this2.onAllCheckChange
+        }),
+        key: "checkbox",
+        dataIndex: "checkbox",
+        fixed: "left",
+        width: 50,
+        render: function render(text, record, index) {
+          var attr = {};
+          record._disabled ? attr.disabled = record._disabled : "";
+          return _react2["default"].createElement(Checkbox, _extends({
+            key: index,
+            className: 'table-checkbox'
+          }, attr, {
+            checked: record._checked,
+            onClick: _this2.handleClick,
+            onChange: _this2.onCheckboxChange(text, record, index)
+          }));
+        }
+      }];
+      return _defaultColumns.concat(columns);
+    };
   }, _temp;
 }
 module.exports = exports['default'];

dist/demo.css

@@ -5259,18 +5259,6 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
   .u-panel .u-panel-body {
     padding: 15px 15px;
     position: relative; }
-    .u-panel .u-panel-body .uf {
-      position: absolute;
-      right: 25px;
-      top: 30px;
-      color: #fff;
-      font-size: 20px;
-      padding: 2px 8px;
-      margin: 8px;
-      border-radius: 4px;
-      cursor: pointer; }
-      .u-panel .u-panel-body .uf:hover {
-        color: #a8a7a7; }
 
 .u-panel-default {
   border-color: #ddd; }
@@ -6773,8 +6761,6 @@ input.u-button[type="submit"] {
     height: 36px;
     line-height: 36px;
     margin: 5px; }
-    .u-pagination-total span {
-      padding: 0 5px; }
 
 .pagination-state {
   float: left;
@@ -7546,7 +7532,7 @@ ul {
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   box-sizing: border-box;
-  z-index: 1800;
+  z-index: 1050;
   left: -9999px;
   top: -9999px;
   position: absolute;
@@ -7589,10 +7575,7 @@ ul {
     cursor: pointer;
     white-space: nowrap;
     overflow: hidden;
-    transition: background 0.3s ease;
+    transition: background 0.3s ease; }
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; }
   .u-select-dropdown .u-select-dropdown-menu-item:hover,
   .u-select-dropdown .u-select-dropdown-menu-item-active {
     background-color: #e7f4fd; }
@@ -8138,32 +8121,6 @@ ul {
       margin-left: -5px;
       border-width: 0 5px 5px;
       border-bottom-color: #000; }
-  .u-tooltip.inverse-arrow.right .tooltip-arrow {
-    top: 50%;
-    left: auto;
-    right: 0;
-    margin-top: -5px;
-    border-width: 5px 0 5px 5px;
-    border-left-color: #000; }
-  .u-tooltip.inverse-arrow.left .tooltip-arrow {
-    top: 50%;
-    left: 0;
-    margin-top: -5px;
-    border-width: 5px 5px 5px 0;
-    border-right-color: #000; }
-  .u-tooltip.inverse-arrow.top .tooltip-arrow {
-    top: 0;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 0 5px 5px;
-    border-bottom-color: #000; }
-  .u-tooltip.inverse-arrow.bottom .tooltip-arrow {
-    top: auto;
-    bottom: 0;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px 5px 0;
-    border-top-color: #000; }
   .u-tooltip.inverse.bottom .tooltip-arrow::after {
     top: 1px;
     margin-left: -5px;
@@ -8171,14 +8128,6 @@ ul {
     border-bottom-color: #fff; }
   .u-tooltip.inverse.bottom .tooltip-arrow {
     border-bottom-color: #d9d9d9; }
-  .u-tooltip.inverse-arrow.inverse.top .tooltip-arrow::after {
-    top: 1px;
-    margin-left: -5px;
-    border-top-width: 0;
-    border-bottom-color: #fff;
-    border-bottom-width: inherit; }
-  .u-tooltip.inverse-arrow.inverse.top .tooltip-arrow {
-    border-bottom-color: #d9d9d9; }
   .u-tooltip.inverse.left .tooltip-arrow::after {
     border-right-width: 0;
     top: -5px;
@@ -8186,14 +8135,6 @@ ul {
     border-left-color: #fff; }
   .u-tooltip.inverse.left .tooltip-arrow {
     border-left-color: #d9d9d9; }
-  .u-tooltip.inverse-arrow.inverse.right .tooltip-arrow::after {
-    border-right-width: 0;
-    top: -5px;
-    margin-left: -6px;
-    border-left-color: #fff;
-    border-left-width: inherit; }
-  .u-tooltip.inverse-arrow.inverse.right .tooltip-arrow {
-    border-left-color: #d9d9d9; }
   .u-tooltip.inverse.right .tooltip-arrow::after {
     border-left-width: 0;
     top: -5px;
@@ -8201,14 +8142,6 @@ ul {
     border-right-color: #fff; }
   .u-tooltip.inverse.right .tooltip-arrow {
     border-right-color: #d9d9d9; }
-  .u-tooltip.inverse-arrow.inverse.left .tooltip-arrow::after {
-    border-left-width: 0;
-    top: -5px;
-    margin-left: 1px;
-    border-right-color: #fff;
-    border-right-width: inherit; }
-  .u-tooltip.inverse-arrow.inverse.left .tooltip-arrow {
-    border-right-color: #d9d9d9; }
   .u-tooltip.inverse.top .tooltip-arrow::after {
     top: -6px;
     margin-left: -5px;
@@ -8217,15 +8150,6 @@ ul {
     border-top-color: #fff; }
   .u-tooltip.inverse.top .tooltip-arrow {
     border-top-color: #d9d9d9; }
-  .u-tooltip.inverse-arrow.inverse.bottom .tooltip-arrow::after {
-    top: -6px;
-    margin-left: -5px;
-    border-bottom-width: 0;
-    border-bottom-color: #d9d9d9;
-    border-top-color: #fff;
-    border-top-width: inherit; }
-  .u-tooltip.inverse-arrow.inverse.bottom .tooltip-arrow {
-    border-top-color: #d9d9d9; }
   .u-tooltip.inverse .tooltip-inner {
     background-color: #fff;
     color: #333333;
@@ -8307,7 +8231,7 @@ ul {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1900;
+  z-index: 1600;
   opacity: .7;
   filter: blur(0.5px);
   background-color: #fff; }
@@ -9087,7 +9011,7 @@ ul {
   position: absolute;
   left: -9999px;
   top: -9999px;
-  z-index: 1800; }
+  z-index: 1000; }
 
 .rc-calendar-picker-hidden {
   display: none; }