拖拽优化测试

build/Table.js

@@ -159,14 +159,13 @@ var Table = function (_Component) {
     _this.renderDragHideTable = function () {
       var _this$props = _this.props,
           columns = _this$props.columns,
-          dragborder = _this$props.dragborder,
+          dragborder = _this$props.dragborder;
-          dragborderKey = _this$props.dragborderKey;
 
       if (!dragborder) return null;
       var sum = 0;
       return _react2["default"].createElement(
         'div',
-        { id: 'u-table-drag-hide-table-' + dragborderKey, className: _this.props.clsPrefix + '-hiden-drag' },
+        { className: _this.props.clsPrefix + '-hiden-drag' },
         columns.map(function (da, i) {
           sum += da.width ? da.width : 0;
           return _react2["default"].createElement('div', { className: _this.props.clsPrefix + '-hiden-drag-li', key: da + "_hiden_" + i, style: { left: sum + "px" } });
@@ -466,7 +465,6 @@ var Table = function (_Component) {
         onMouseUp = _props.onMouseUp,
         dragborder = _props.dragborder,
         onThMouseMove = _props.onThMouseMove,
-        dragborderKey = _props.dragborderKey,
         minColumnWidth = _props.minColumnWidth,
         headerHeight = _props.headerHeight,
         afterDragColWidth = _props.afterDragColWidth,
@@ -486,7 +484,7 @@ var Table = function (_Component) {
 
     var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
     var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
-    var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder } : {};
+    var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, onDropBorder: onDropBorder } : {};
     var contentWidthDiff = 0;
     //非固定表格,宽度不够时自动扩充
     if (!fixed) {
@@ -648,8 +646,7 @@ var Table = function (_Component) {
       clsPrefix: clsPrefix + '-expanded-row',
       indent: 1,
       expandable: false,
-      store: this.store,
+      store: this.store
-      dragborderKey: this.props.dragborderKey
     });
   };
   /**

build/TableHeader.js

@@ -50,6 +50,108 @@ var TableHeader = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
+    _this.onTrMouseDown = function (e) {
+      _utils.Event.stopPropagation(e);
+      var event = _utils.Event.getEvent(e);
+      var _this$props = _this.props,
+          clsPrefix = _this$props.clsPrefix,
+          contentTable = _this$props.contentTable;
+
+
+      var type = _utils.Event.getTarget(event).getAttribute('data-type');
+      if (!_this.props.dragborder && !_this.props.draggable) return;
+      if (type == 'online' && _this.props.dragborder) {
+
+        var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
+        var defaultWidth = _utils.Event.getTarget(event).getAttribute("data-th-width");
+        var currentObj = _this.table.cols[currentIndex];
+        _this.drag.option = "border"; //拖拽操作
+        _this.drag.currIndex = currentIndex;
+        _this.drag.oldLeft = event.x;
+        _this.drag.oldWidth = parseInt(currentObj.style.width);
+        _this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
+        _this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
+      } else if (type != 'online' && _this.props.draggable) {} else {
+        console.log("onTrMouseDown dragborder or draggable is all false !");
+        return;
+      }
+    };
+
+    _this.onTrMouseMove = function (e) {
+      var _this$props2 = _this.props,
+          clsPrefix = _this$props2.clsPrefix,
+          dragborder = _this$props2.dragborder,
+          contentDomWidth = _this$props2.contentDomWidth,
+          scrollbarWidth = _this$props2.scrollbarWidth,
+          contentTable = _this$props2.contentTable,
+          headerScroll = _this$props2.headerScroll;
+
+      _utils.Event.stopPropagation(e);
+      var event = _utils.Event.getEvent(e);
+      if (_this.props.dragborder && _this.drag.option == "border") {
+        //移动改变宽度
+        var currentCols = _this.table.cols[_this.drag.currIndex];
+        var diff = event.x - _this.drag.oldLeft;
+        var newWidth = _this.drag.oldWidth + diff;
+        _this.drag.newWidth = newWidth;
+        // if(newWidth > this.drag.minWidth){
+        if (newWidth > _this.minWidth) {
+          currentCols.style.width = newWidth + 'px';
+          //hao 支持固定表头拖拽 修改表体的width
+          if (_this.fixedTable.cols) {
+            _this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
+          }
+          var newTableWidth = _this.drag.tableWidth + diff + 'px';
+          _this.table.table.style.width = newTableWidth; //改变table的width
+          _this.table.innerTableBody.style.width = newTableWidth;
+          var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
+
+          //表头滚动条处理
+          if (headerScroll) {
+            if (showScroll < 0) {
+              //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+              _this.table.contentTableHeader.style.overflowX = 'scroll';
+              _this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
+              _this.optTableMargin(_this.table.fixedRighHeadertTable, scrollbarWidth);
+              // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
+              // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
+              //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
+            } else {
+              _this.table.contentTableHeader.style.overflowX = 'hidden';
+              _this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
+              _this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
+            }
+          } else {
+            if (showScroll < 0) {
+              _this.optTableMargin(_this.table.fixedLeftBodyTable, '-' + scrollbarWidth);
+              _this.optTableMargin(_this.table.fixedRightBodyTable, '-' + scrollbarWidth);
+              _this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' });
+              _this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' });
+            } else {
+              _this.optTableMargin(_this.table.fixedLeftBodyTable, 0);
+              _this.optTableMargin(_this.table.fixedRightBodyTable, 0);
+              _this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
+              _this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'auto' });
+            }
+          }
+        }
+      } else if (_this.props.draggable && _this.drag.option == "draggable") {} else {
+        console.log("onTrMouseMove dragborder or draggable is all false !");
+        return;
+      }
+    };
+
+    _this.onTrMouseUp = function (event) {
+      var width = _this.drag.newWidth;
+      _this.mouseClear(event);
+      _this.props.onDropBorder && _this.props.onDropBorder(event, width);
+
+      var rows = _this.props.rows;
+
+      var data = { rows: rows[0], cols: _this.table.cols, currIndex: _this.drag.currIndex };
+      _this.props.afterDragColWidth && _this.props.afterDragColWidth(data);
+    };
+
     _this.optTableMargin = function (table, scrollbarWidth) {
       if (table) {
         table.style.marginBottom = scrollbarWidth + "px";
@@ -69,13 +171,13 @@ var TableHeader = function (_Component) {
     };
 
     _this.onLineMouseMove = function (e) {
-      var _this$props = _this.props,
+      var _this$props3 = _this.props,
-          clsPrefix = _this$props.clsPrefix,
+          clsPrefix = _this$props3.clsPrefix,
-          dragborder = _this$props.dragborder,
+          dragborder = _this$props3.dragborder,
-          contentDomWidth = _this$props.contentDomWidth,
+          contentDomWidth = _this$props3.contentDomWidth,
-          scrollbarWidth = _this$props.scrollbarWidth,
+          scrollbarWidth = _this$props3.scrollbarWidth,
-          contentTable = _this$props.contentTable,
+          contentTable = _this$props3.contentTable,
-          headerScroll = _this$props.headerScroll;
+          headerScroll = _this$props3.headerScroll;
 
       _utils.Event.stopPropagation(e);
       var event = _utils.Event.getEvent(e);
@@ -134,9 +236,9 @@ var TableHeader = function (_Component) {
     _this.onLineMouseDown = function (e) {
       _utils.Event.stopPropagation(e);
       var event = _utils.Event.getEvent(e);
-      var _this$props2 = _this.props,
+      var _this$props4 = _this.props,
-          clsPrefix = _this$props2.clsPrefix,
+          clsPrefix = _this$props4.clsPrefix,
-          contentTable = _this$props2.contentTable;
+          contentTable = _this$props4.contentTable;
 
       if (!_this.props.dragborder) return;
       var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
@@ -152,6 +254,10 @@ var TableHeader = function (_Component) {
 
     _this.onLineMouseUp = function (event) {
       var width = _this.drag.newWidth;
+      // const newTableWidth = this.drag.tableWidth + diff +'px';
+      // this.table.table.style.width  = newTableWidth;//同步table的width
+      // this.table.innerTableBody.style.width  = newTableWidth ;//同步改变table body 的width
+      // console.log(" --onLineMouseUp--- ");
       _this.clearDragBorder(event);
       _this.props.onDropBorder && _this.props.onDropBorder(event, width);
     };
@@ -235,11 +341,11 @@ var TableHeader = function (_Component) {
     };
 
     _this.filterRenderType = function (type, dataIndex, index) {
-      var _this$props3 = _this.props,
+      var _this$props5 = _this.props,
-          clsPrefix = _this$props3.clsPrefix,
+          clsPrefix = _this$props5.clsPrefix,
-          rows = _this$props3.rows,
+          rows = _this$props5.rows,
-          filterDelay = _this$props3.filterDelay,
+          filterDelay = _this$props5.filterDelay,
-          locale = _this$props3.locale;
+          locale = _this$props5.locale;
 
       switch (type) {
         //文本输入
@@ -353,6 +459,111 @@ var TableHeader = function (_Component) {
     return _this;
   }
 
+  TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
+    this.initTable();
+    // this.initEvent();
+    this.initNewEvent();
+  };
+
+  /**
+   * 获取table的属性存放在this.table 中。(公用方法)
+   * @returns
+   * @memberof TableHeader
+   */
+
+
+  TableHeader.prototype.initTable = function initTable() {
+    var contentTable = this.props.contentTable;
+
+    if (!this.props.dragborder && !this.props.draggable) return;
+    // let el = ReactDOM.findDOMNode(this);
+    var tableDome = this._thead.parentNode;
+    var table = {};
+    if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
+      table.table = tableDome;
+      table.cols = tableDome.getElementsByTagName("col");
+      table.ths = tableDome.getElementsByTagName("th");
+      table.tr = tableDome.getElementsByTagName("tr");
+    }
+
+    table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
+    table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
+    table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
+    table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer');
+    table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer');
+    table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
+
+    this.table = table;
+
+    if (!this.props.dragborder) return;
+    if (document.getElementById("u-table-drag-thead-" + this.theadKey)) {
+      this.fixedTable = {};
+      var _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode;
+      var siblingDom = _fixedParentContext.parentNode.nextElementSibling;
+      if (siblingDom) {
+        var fixedTable = siblingDom.querySelector("table");
+        this.fixedTable.table = fixedTable;
+        this.fixedTable.cols = fixedTable.getElementsByTagName("col");
+        // this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th");
+      }
+    }
+  };
+
+  TableHeader.prototype.initNewEvent = function initNewEvent() {
+    var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }, { key: 'mousedown', fun: this.onTrMouseDown }];
+    this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
+
+    // if(this.props.dragborder){
+
+    // this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}]);//表示把事件添加到竖线
+    // this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}]);
+    // }
+    // if(!this.props.draggable)return;
+    //拖拽交换列事件
+    // this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'',true);//表示把事件添加到th元素上
+  };
+
+  TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) {
+    var tr = this.table.tr;
+
+    for (var i = 0; i < events.length; i++) {
+      var _event = events[i];
+      if (type === "remove") {
+        _utils.EventUtil.removeHandler(eventSource, _event.key, _event.fun);
+      } else {
+        _utils.EventUtil.addHandler(eventSource, _event.key, _event.fun);
+      }
+    }
+  };
+
+  /**
+  * 调整列宽的down事件
+  * @memberof TableHeader
+  */
+
+
+  /**
+   * 调整列宽的move事件
+   * @memberof TableHeader
+   */
+
+
+  /**
+  * 调整列宽的up事件
+  * @memberof TableHeader
+  */
+
+
+  TableHeader.prototype.mouseClear = function mouseClear() {
+    if (!this.drag || !this.drag.option) return;
+    // let {rows} = this.props;
+    // 
+    // 
+    this.drag = {
+      option: ""
+    };
+  };
+
   /**
    *
    * 动态绑定th line 事件方法
@@ -361,6 +572,8 @@ var TableHeader = function (_Component) {
    * @param {*} eventSource 为false 给 th 内部的div增加事件
    * @memberof TableHeader
    */
+
+
   TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
     var _table = this.table,
         ths = _table.ths,
@@ -410,11 +623,6 @@ var TableHeader = function (_Component) {
     }
   };
 
-  TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
-    this.initTable();
-    this.initEvent();
-  };
-
   TableHeader.prototype.componentWillUnmount = function componentWillUnmount() {
     if (!this.table) return;
     if (this.props.draggable) {
@@ -425,11 +633,6 @@ var TableHeader = function (_Component) {
     }
   };
 
-  // componentDidMount(){
-  // this.initTable();
-  // this.initEvent();
-  // } 
-
   /**
    * 初始化拖拽列宽的事件处理
    * @returns
@@ -463,48 +666,6 @@ var TableHeader = function (_Component) {
     this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }], 'remove');
   };
 
-  /**
-   * 获取table的属性存放在this.table 中。(公用方法)
-   * @returns
-   * @memberof TableHeader
-   */
-
-
-  TableHeader.prototype.initTable = function initTable() {
-    var contentTable = this.props.contentTable;
-
-    if (!this.props.dragborder && !this.props.draggable) return;
-    // let el = ReactDOM.findDOMNode(this);
-    var tableDome = this._thead.parentNode;
-    var table = {};
-    if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
-      table.table = tableDome;
-      table.cols = tableDome.getElementsByTagName("col");
-      table.ths = tableDome.getElementsByTagName("th");
-    }
-
-    table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
-    table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
-    table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
-    table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer');
-    table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer');
-    table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
-
-    this.table = table;
-
-    if (!this.props.dragborder) return;
-    if (document.getElementById("u-table-drag-thead-" + this.theadKey)) {
-      this.fixedTable = {};
-      var _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode;
-      var siblingDom = _fixedParentContext.parentNode.nextElementSibling;
-      if (siblingDom) {
-        var fixedTable = siblingDom.querySelector("table");
-        this.fixedTable.table = fixedTable;
-        this.fixedTable.cols = fixedTable.getElementsByTagName("col");
-        // this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th");
-      }
-    }
-  };
   /**
    *相关滚动条联动操作
    *
@@ -675,6 +836,7 @@ var TableHeader = function (_Component) {
           return _this2._thead = _thead;
         } }),
       rows.map(function (row, index) {
+        var _rowLeng = row.length - 1;
         return _react2["default"].createElement(
           "tr",
           { key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
@@ -719,13 +881,12 @@ var TableHeader = function (_Component) {
               thClassName += " " + clsPrefix + "-thead-th " + canDotDrag;
             }
             thClassName += " " + fixedStyle;
-
+            if (!da.fixed && columIndex != _rowLeng) {
-            if (!da.fixed) {
 
               return _react2["default"].createElement(
                 "th",
                 _extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed,
-                  "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width }),
+                  "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width, "data-row-leng": "1111111111111" }),
                 da.children,
                 dragborder ? _react2["default"].createElement(
                   "div",

build/lib/dragColumn.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 exports["default"] = dragColumn;
 
 var _react = require('react');
@@ -28,7 +28,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 
-var cloneDeep = require('lodash.clonedeep');
 /**
  * 参数: 列拖拽
  * @param {*} Table
@@ -66,23 +65,23 @@ function dragColumn(Table) {
         targetIndex = columns.findIndex(function (da, i) {
           return da.key == dragTarg.key;
         });
-        // for (let index = 0; index < columns.length; index++) {
-        //   const da = columns[index];
-        //   if(da.key === dragSource.key){
-        //     columns[index] = dragTargColum; 
-        //   }
-        //   if(da.key === dragTarg.key){
-        //     columns[index] = dragSourceColum;
-        //   }
-        // }
         // 向前移动
         if (targetIndex < sourceIndex) {
           targetIndex = targetIndex + 1;
         }
         columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
-        _this.setState({
+        var _newColumns = [];
-          columns: cloneDeep(columns)
+        columns.forEach(function (da, i) {
+          var newDate = _extends(da, {});
+          newDate.title = da.title;
+          _newColumns.push(newDate);
         });
+        // console.log(" onDrop-------columns--- ",columns);
+        _this.setState({
+          columns: _newColumns //cloneDeep(columns)
+        });
+        // console.log(" onDrop-------columns--- ",_newColumns);
+        console.log(columns === _newColumns);
         if (_this.props.onDrop) {
           _this.props.onDrop(event, data, columns);
         }
@@ -106,14 +105,6 @@ function dragColumn(Table) {
       }
     };
 
-    DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
-      if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
-        return obj;
-      }
-      var resultData = {};
-      return this.recursion(obj, resultData);
-    };
-
     DragColumn.prototype.recursion = function (_recursion) {
       function recursion(_x) {
         return _recursion.apply(this, arguments);
@@ -150,7 +141,6 @@ function dragColumn(Table) {
           onDrop = _props.onDrop,
           others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
 
-      var key = new Date().getTime();
       return _react2["default"].createElement(Table, _extends({}, others, {
         columns: this.state.columns,
         data: data,
@@ -161,8 +151,6 @@ function dragColumn(Table) {
         onDragEnter: this.onDragEnter,
         draggable: draggable,
         dragborder: dragborder
-        // dragborder={false}
-        , dragborderKey: key
       }));
     };
 

demo/demolist/Demo01.js

@@ -1,79 +0,0 @@
-/**
-*
-* @title 基本表格
-* @parent 基础 Basic
-* @description 鼠标hover行时呼出操作按钮
-*/
-
-import React, { Component } from "react";
-import {Button,Tooltip} from "tinper-bee";
-import Table from "../../src";
-
-const columns = [
-  {
-    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
-    fixed:'left',
-    render: (text, record, index) => {
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "inline-block",
-            width: "60px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "middle",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500,"textAlign":'center'},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200,"textAlign":'center' }
-];
-
-const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
-];
-
-class Demo01 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data
-    }
-  }
-  handleClick = () => {
-    console.log('这是第' , this.currentIndex , '行');
-    console.log('内容：' , this.currentRecord);
-  }
-
-  onRowHover=(index,record)=>{
-    this.currentIndex = index;
-    this.currentRecord = record;
-  }
-
-  getHoverContent=()=>{
-    return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
-  }
-
-  render() {
-    return (
-        <Table
-          columns={columns}
-          data={data}
-          parentNodeId='parent'
-          height={40}
-          headerHeight={40}
-          bordered = {true}
-          hoverContent={this.getHoverContent}
-          onRowHover={this.onRowHover}
-        />
-    );
-  }
-}
-
-export default Demo01;

demo/demolist/Demo02.js

@@ -1,45 +0,0 @@
-/**
-*
-* @title 默认无数据展示
-* @parent 基础 Basic
-* @description 无数据时显示效果展示（可自定义）
-*
-*/
-
-
-import React, { Component } from 'react';
-import Table from '../../src';
-import Icon from 'bee-icon';
-
-
-const columns02 = [
-    {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
-      width: "40%"
-    },
-    {
-      title: "Age",
-      dataIndex: "age",
-      key: "age",
-      width: "30%"
-    },
-    {
-      title: "Address",
-      dataIndex: "address",
-      key: "address"
-    }
-  ];
-  
-  const data02 = [];
-
-  const emptyFunc = () => <Icon type="uf-nodata"></Icon>
-  
-class Demo02 extends Component {
-  render() {
-    return <Table className="demo02" columns={columns02} data={data02} emptyText={emptyFunc} />;
-  }
-}
-
-export default Demo02;

demo/demolist/Demo02.scss

@@ -1,5 +0,0 @@
-.demo02 {
-    .u-table-placeholder i{
-        font-size: 60px;
-    }
-}

demo/demolist/Demo03.js

@@ -1,78 +0,0 @@
-/**
-*
-* @title 固定表头
-* @parent 基础 Basic
-* @description 设置`scroll.y`指定滚动区域的高度，添加纵向滚动条，达到固定表头效果
-*/
-
-import React, { Component } from 'react';
-import Table from '../../src';
-
-const columns03 = [
-  {
-    title: "Full Name",
-    width: 100,
-    dataIndex: "name",
-    key: "name"
-  },
-  { title: "Age", width: 100, dataIndex: "age", key: "age"},
-  { title: "Address", dataIndex: "address", key: "1" }
-];
-
-const data03 = [
-  {
-    key: "1",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
-  },
-  {
-    key: "2",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "3",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "4",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },{
-    key: "11",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
-  },
-  {
-    key: "12",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "13",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "14",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  }
-];
-
-class Demo03 extends Component {
-  render() {
-    return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;
-  }
-}
-
-export default Demo03; 

demo/demolist/Demo04.js

@@ -1,80 +0,0 @@
-/**
-*
-* @title 隔行换色
-* @parent 基础 Basic
-* @description 可自定义斑马线颜色
-*
-*/
-
-
-import React, { Component } from 'react';
-import Table from '../../src';
-
-const columns04 = [
-  {
-    title: "Full Name",
-    width: 100,
-    dataIndex: "name",
-    key: "name"
-  },
-  { title: "Age", width: 100, dataIndex: "age", key: "age"},
-  { title: "Address", dataIndex: "address", key: "1" }
-];
-
-const data04 = [
-  {
-    key: "1",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
-  },
-  {
-    key: "2",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "3",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "4",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },{
-    key: "11",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
-  },
-  {
-    key: "12",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "13",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "14",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  }
-];
-
-class Demo04 extends Component {
-  render() {
-    return <Table className="demo04" columns={columns04} data={data04} />;
-  }
-}
-
-export default Demo04; 

demo/demolist/Demo04.scss

@@ -1,8 +0,0 @@
-.demo04 {
-    &.u-table tr:nth-child(2n){
-        background: #f7f9fb;
-    }
-    &.u-table tr.u-table-row-hover, .u-table tr:hover{
-        background: #ebecf0;
-    }
-}

demo/demolist/Demo05.js

@@ -1,73 +0,0 @@
-/**
-*
-* @title 表格 Loading 加载
-* @parent 基础 Basic
-* @description  loading可以传boolean或者object对象，object为bee-loading组件的参数类型
-*
-*/
-
-import React, { Component } from "react";
-import Table from "../../src";
-import {Button,Popconfirm} from "tinper-bee";
-
-const columns05 = [
-  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
-  {
-    title: "操作",
-    dataIndex: "d",
-    key: "d",
-    render(text, record, index) {
-      return (
-        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-          <a href="javascript:;">
-            一些操作
-          </a>
-        </Popconfirm>
-      );
-    }
-  }
-];
-
-const data05 = [
-  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
-];
-
-class Demo05 extends Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      loading : true
-    }
-  }
-  changeLoading = () => {
-    this.setState({
-      loading : !this.state.loading
-    })
-  }
-  render() {
-    return (
-      <div>
-        <Button
-          className="editable-add-btn"
-          onClick={this.changeLoading}
-        >
-          切换loading
-        </Button>
-        <Table
-          columns={columns05}
-          data={data05}
-          title={currentData => <div>标题: 这是一个标题</div>}
-          footer={currentData => <div>表尾: 我是小尾巴</div>}
-          // loading={this.state.loading}或者是boolean
-          loading={{show:this.state.loading}}
-        />
-      </div>
-    );
-  }
-}
-
-export default Demo05;

demo/demolist/Demo101.js

@@ -1,129 +0,0 @@
-/**
-*
-* @title 嵌套子表格
-* @parent 扩展行 Expanded Row
-* @description 通过expandedRowRender参数来实现子表格
-*
-*/
-
-import React, { Component } from "react";
-import { Popconfirm } from 'tinper-bee';
-import Table from "../../src";
-import dragColumn from '../../src/lib/dragColumn';
-const DragColumnTable = dragColumn(Table);
-const columns16 = [
-  {
-    title: "操作",
-    dataIndex: "d",
-    key: "d", 
-    width:200,
-    render(text, record, index) {
-      return (
-        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-          <a href="javascript:;" tooltip={text} >
-          一些操作
-          </a>
-        </Popconfirm>
-      );
-    }
-  },
-  { title: "用户名", dataIndex: "a", key: "a", width: 250 },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
-  
-];
-const columns17 = [
-  {
-    title: "操作",
-    dataIndex: "d",
-    key: "d",
-    width:200,
-    render(text, record, index) {
-      return (
-        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-          <a href="javascript:;" tooltip={text} >
-          一些操作
-          </a>
-        </Popconfirm>
-      );
-    }
-  },
-  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
-  
-];
-
-const data16 = [
-  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
-];
-
-
-class Demo16 extends Component {
-  constructor(props){
-    super(props);
-    this.state={
-      data_obj:{}
-    }
-  }
-  expandedRowRender = (record, index, indent) => {
-    let height = 42 * (this.state.data_obj[record.key].length+ 2);
-    
-    return (
-      <Table
-        columns={columns17}
-        style={{height:height}}
-        data={this.state.data_obj[record.key]} 
-       
-      />
-    );
-  };
-  getData=(expanded, record)=>{
-    //当点击展开的时候才去请求数据
-    let new_obj = Object.assign({},this.state.data_obj);
-    if(expanded){
-      if(record.key==='1'){
-        new_obj[record.key] = [
-          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-          { a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
-        ]
-        this.setState({
-          data_obj:new_obj
-        })
-      }else{
-        new_obj[record.key] = [
-          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }
-        ]
-        this.setState({
-          data_obj:new_obj
-        })
-      }
-    }
-  }
-  haveExpandIcon=(record, index)=>{
-    //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
-    if(index == 0){
-      return true;
-    }
-    return false;
-  }
-  render() {
-    return (
-      <DragColumnTable
-        columns={columns16}
-        data={data16}
-        onExpand={this.getData}
-        expandedRowRender={this.expandedRowRender}
-        scroll={{x:true}}
-        dragborder={true} 
-        draggable={true} 
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
-      />
-    );
-  }
-}
-
-export default Demo16;

demo/demolist/Demo102.js

@@ -1,132 +0,0 @@
-/**
-*
-* @title 层级树型展示
-* @parent 扩展行 Expanded Row
-* @description 通过在data中配置children数据，来自动生成树形表格
-*
-*/
-
-
-import React, { Component } from 'react';
-import Table from '../../src';
-
-
-const columns4 = [
-  {
-    title: "Name",
-    dataIndex: "name",
-    key: "name",
-    width: "40%"
-  },
-  {
-    title: "Age",
-    dataIndex: "age",
-    key: "age",
-    width: "30%"
-  },
-  {
-    title: "Address",
-    dataIndex: "address",
-    key: "address"
-  }
-];
-
-const data4 = [
-  {
-    key: 1,
-    name: "John Brown sr.",
-    age: 60,
-    address: "New York No. 1 Lake Park",
-    children: [
-      {
-        key: 11,
-        name: "John Brown",
-        age: 42,
-        address: "New York No. 2 Lake Park"
-      },
-      {
-        key: 12,
-        name: "John Brown jr.",
-        age: 30,
-        address: "New York No. 3 Lake Park",
-        children: [
-          {
-            key: 121,
-            name: "Jimmy Brown",
-            age: 16,
-            address: "New York No. 3 Lake Park"
-          }
-        ]
-      },
-      {
-        key: 13,
-        name: "Jim Green sr.",
-        age: 72,
-        address: "London No. 1 Lake Park",
-        children: [
-          {
-            key: 131,
-            name: "Jim Green",
-            age: 42,
-            address: "London No. 2 Lake Park",
-            children: [
-              {
-                key: 1311,
-                name: "Jim Green jr.",
-                age: 25,
-                address: "London No. 3 Lake Park"
-              },
-              {
-                key: 1312,
-                name: "Jimmy Green sr.",
-                age: 18,
-                address: "London No. 4 Lake Park"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    key: 2,
-    name: "Joe Black",
-    age: 32,
-    address: "Sidney No. 1 Lake Park"
-  }
-];
-class Demo4 extends Component {
-
-  constructor(props){
-      super(props);
-      this.state = {
-        data: data4,
-        factoryValue: 0,
-        selectedRow: new Array(data4.length)//状态同步
-      }
-  }
-
-  render() {
-    return <Table 
-    rowClassName={(record,index,indent)=>{
-      if (this.state.selectedRow[index]) {
-          return 'selected';
-      } else {
-          return '';
-      }
-    }}
-    onRowClick={(record,index,indent)=>{
-      let selectedRow = new Array(this.state.data.length);
-      selectedRow[index] = true;
-      this.setState({
-          factoryValue: record,
-          selectedRow: selectedRow
-      });
-    }}
-    
-    columns={columns4} data={data4} />;
-  }
-}
-
-
-export default Demo4;

demo/demolist/Demo103.js

@@ -1,59 +0,0 @@
-/**
-*
-* @title 选中行颜色、自定义表格标题和表尾
-* @parent 扩展行 Expanded Row
-* @description 选中行的样式可自定义
-*/
-
-import React, { Component } from "react";
-import {Button,Tooltip,} from "tinper-bee";
-
-import Table from "../../src";
-
-const columns = [
-  { title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
-];
-
-const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
-];
-
-class Demo26 extends Component {
-
-  constructor(props){
-      super(props);
-      this.state = {
-        data: data,
-        selectedRowIndex: 0
-      }
-  }
-
-  render() {
-    return (
-      <Table
-        columns={columns}
-        data={data}
-        rowClassName={(record,index,indent)=>{
-          if (this.state.selectedRowIndex == index) {
-              return 'selected';
-          } else {
-              return '';
-          }
-        }}
-        onRowClick={(record,index,indent)=>{
-          this.setState({ 
-              selectedRowIndex: index
-          });
-        }}
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
-      /> 
-    );
-  }
-}
-
-export default Demo26;

demo/demolist/Demo104.js

@@ -1,87 +0,0 @@
-/**
-*
-* @title 自定义行高
-* @parent 扩展行 Expanded Row
-* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
-*/
-
-import React, { Component } from "react";
-import {Button,Tooltip} from "tinper-bee";
-import Table from "../../src";
-
-const columns = [
-  {
-    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
-    fixed:'left',
-    render: (text, record, index) => {
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "inline-block",
-            width: "60px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "middle",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
-];
-
-const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
-];
-
-class Demo1 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data,
-      selectedRowIndex: 0
-    }
-  }
-  handleClick = () => {
-    console.log('这是第' , this.currentIndex , '行');
-    console.log('内容：' , this.currentRecord);
-  }
-
-  onRowHover=(index,record)=>{
-    this.currentIndex = index;
-    this.currentRecord = record;
-  }
-
-  getHoverContent=()=>{
-    return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
-  }
-
-  render() {
-    return (
-   
-        <Table
-          columns={columns}
-          data={data}
-          parentNodeId='parent'
-          height={40}
-          headerHeight={40}
-          hoverContent={this.getHoverContent}
-          onRowHover={this.onRowHover}
-          onRowClick={(record, index, indent) => {
-            this.setState({
-              selectedRowIndex: index
-            });
-          }}
-        />
-
-     
-    );
-  }
-}
-
-export default Demo1;

demo/demolist/Demo105.js

@@ -1,110 +0,0 @@
-/**
-*
-* @title 图片在表格中的展示
-* @parent 扩展行 Expanded Row
-* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
-*/
-
-import React, { Component } from "react";
-import {Button,Tooltip} from "tinper-bee";
-import Table from "../../src";
-
-const columns = [
-    {
-        title: "序号",
-        dataIndex: "index",
-        key: "index",
-        width: 80,
-        render(text, record, index) {
-            return index + 1;
-        }
-    },
-    {
-        title: "组织部门",
-        dataIndex: "orgDept",
-        key: "orgDept",
-        width: 100,
-    },
-    {
-        title: "设施管理部门",
-        dataIndex: "facilityManageUnit",
-        key: "facilityManageUnit",
-        width: 100,
-    },
-    {
-        title: "案卷编号",
-        dataIndex: "docketnum",
-        key: "docketnum",
-        width: 100,
-    },
-    {
-        title: "数量",
-        dataIndex: "num",
-        key: "num",
-        width: 100,
-    },
-    {
-        title: "首次发现时间",
-        dataIndex: "discoveryTime",
-        key: "discoveryTime",
-        width: 150,
-    },
-    {
-        title: "实际修复时间",
-        dataIndex: "repairTime",
-        key: "repairTime",
-        width: 150,
-    },
-    {
-        title: "图样",
-        dataIndex: "picture",
-        key: "picture",
-        render(text, record, index) {
-            return <img style={{height:'50px'}} src={text} alt="Picture"/>
-        }
-    }
-];
-
-const data = [
-  { key: "1", orgDept: "组织1", facilityManageUnit: "部门1", docketnum: 41, num: "1", discoveryTime: "2018-10-17", repairTime: "2018-10-30", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg"},
-  { key: "2", orgDept: "组织2", facilityManageUnit: "部门2", docketnum: 30, num: "2", discoveryTime: "2019-01-15", repairTime: "2019-01-20", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg"},
-  { key: "3", orgDept: "组织3", facilityManageUnit: "部门3", docketnum: 35, num: "3", discoveryTime: "2019-04-10", repairTime: "2019-04-17", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg"}
-];
-
-class Demo105 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data,
-      selectedRowIndex: 0
-    }
-  }
-  handleClick = () => {
-    console.log('这是第' , this.currentIndex , '行');
-    console.log('内容：' , this.currentRecord);
-  }
-
-  onRowHover=(index,record)=>{
-    this.currentIndex = index;
-    this.currentRecord = record;
-  }
-
-  getHoverContent=()=>{
-    return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
-  }
-
-  render() {
-    return (
-        <Table
-          columns={columns}
-          data={data}
-          parentNodeId='parent'
-          hoverContent={this.getHoverContent}
-          onRowHover={this.onRowHover}
-        />
-    );
-  }
-}
-
-export default Demo105;

demo/demolist/Demo106.js

@@ -1,123 +0,0 @@
-/**
-*
-* @title 自定义行、列合并
-* @parent 扩展行 Expanded Row
-* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
-*
-*/
-
-import React, { Component } from "react";
-import Table from "../../src";
-
-const renderContent = (value, row, index) => {
-  const obj = {
-    children: value,
-    props: {},
-  };
-  if (index === 4) {
-    obj.props.colSpan = 0;
-  }
-  return obj;
-};
-
-const columns = [{
-  title: 'Name',
-  key: "name",
-  dataIndex: 'name',
-  render: (text, row, index) => {
-    if (index < 4) {
-      return <a href="#">{text}</a>;
-    }
-    return {
-      children: <a href="#">{text}</a>,
-      props: {
-        colSpan: 5,
-      },
-    };
-  },
-}, {
-  title: 'Age',
-  key: "Age",
-  dataIndex: 'age',
-  render: renderContent,
-}, {
-  title: 'Home phone',
-  colSpan: 2,
-  key: "tel",
-  dataIndex: 'tel',
-  render: (value, row, index) => {
-    const obj = {
-      children: value,
-      props: {},
-    };
-    if (index === 2) {
-      obj.props.rowSpan = 2;
-    }
-    if (index === 3) {
-      obj.props.rowSpan = 0;
-    }
-    if (index === 4) {
-      obj.props.colSpan = 0;
-    }
-    return obj;
-  },
-}, {
-  title: 'Phone',
-  colSpan: 0,
-  key: "phone",
-  dataIndex: 'phone',
-  render: renderContent,
-}, {
-  title: 'Address',
-  key: "address",
-  dataIndex: 'address',
-  render: renderContent,
-}];
-
-const data = [{
-  key: '1',
-  name: 'John Brown',
-  age: 32,
-  tel: '0571-22098909',
-  phone: 18889898989,
-  address: 'New York No. 1 Lake Park',
-}, {
-  key: '2',
-  name: 'Jim Green',
-  tel: '0571-22098333',
-  phone: 18889898888,
-  age: 42,
-  address: 'London No. 1 Lake Park',
-}, {
-  key: '3',
-  name: 'Joe Black',
-  age: 32,
-  tel: '0575-22098909',
-  phone: 18900010002,
-  address: 'Sidney No. 1 Lake Park',
-}, {
-  key: '4',
-  name: 'Jim Red',
-  age: 18,
-  tel: '0575-22098909',
-  phone: 18900010002,
-  address: 'London No. 2 Lake Park',
-}, {
-  key: '5',
-  name: 'Jake White',
-  age: 18,
-  tel: '0575-22098909',
-  phone: 18900010002,
-  address: 'Dublin No. 2 Lake Park',
-}];
-
-class Demo15 extends Component {
-  render() {
-    return (
-       <Table columns={columns} data={data}/>
-    );
-  }
-}
-
-
-export default Demo15;

demo/demolist/Demo11.js

@@ -1,140 +0,0 @@
-/**
-*
-* @title 横向滚动条
-* @parent 滚动 Scroll View
-* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
-*/
-
-import React, { Component } from "react";
-import Table from "../../src";
-
-const columns11 = [
-    {
-        title: "序号",
-        dataIndex: "index",
-        key: "index",
-        width: 200, 
-    },
-    {
-        title: "订单编号",
-        dataIndex: "orderCode",
-        key: "orderCode",
-        width: 200, 
-    },
-    {
-        title: "供应商名称",
-        dataIndex: "supplierName",
-        key: "supplierName",
-        width: 200
-    },
-    {
-        title: "类型",
-        dataIndex: "type_name",
-        key: "type_name",
-        width: 200
-    },
-    {
-        title: "采购组织",
-        dataIndex: "purchasing",
-        key: "purchasing",
-        width: 200
-    },
-    {
-        title: "采购组",
-        dataIndex: "purchasingGroup",
-        key: "purchasingGroup",
-         width: 300
-    },
-    {
-        title: "凭证日期",
-        dataIndex: "voucherDate",
-        key: "voucherDate",
-        width: 200,
-        
-    },
-    {
-        title: "审批状态",
-        dataIndex: "approvalState_name",
-        key: "approvalState_name",
-        width: 200
-    },
-    {
-        title: "确认状态",
-        dataIndex: "confirmState_name",
-        key: "confirmState_name",
-         width: 200
-    }, 
-    {
-        title: "关闭状态",
-        dataIndex: "closeState_name",
-        key: "closeState_name",
-        width: 200
-    }
-];
-
-const data11 = [
-    { 
-        index: 1, 
-        orderCode:"2343", 
-        supplierName: "xxx",
-        type_name: "123",
-        purchasing:'内行', 
-        purchasingGroup:"323",
-        voucherDate:"kkkk",
-        approvalState_name:"vvvv",
-        confirmState_name:"aaaa",
-        closeState_name:"vnnnnn",
-        key: "1"
-    }, 
-    { 
-      index: 2, 
-      _checked:true,
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      key: "2"
-    },
-    { 
-      index: 3, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      _disabled:true,
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      key: "3"
-    },
-    { 
-      index: 4, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      key: "4"
-    },
-];
-
-class Demo11 extends Component {
-  render() {
-    return (
-        <Table columns={columns11} data={data11} scroll={{x:true}} />
-    );
-  }
-}
-
-export default Demo11;

demo/demolist/Demo12.js

@@ -1,79 +0,0 @@
-/**
-*
-* @title 纵向滚动条
-* @parent 滚动 Scroll View
-* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
-*/
-
-import React, { Component } from "react";
-import Table from "../../src";
-
-const columns12 = [
-    {
-      title: "Full Name",
-      width: 100,
-      dataIndex: "name",
-      key: "name"
-    },
-    { title: "Age", width: 100, dataIndex: "age", key: "age"},
-    { title: "Address", dataIndex: "address", key: "1" }
-];
-
-const data12 = [
-    {
-        key: "1",
-        name: "John Brown",
-        age: 32,
-        address: "New York Park"
-    },
-    {
-        key: "2",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
-    },
-    {
-        key: "3",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
-    },
-    {
-        key: "4",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
-    },{
-        key: "11",
-        name: "John Brown",
-        age: 32,
-        address: "New York Park"
-    },
-    {
-        key: "12",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
-    },
-    {
-        key: "13",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
-    },
-    {
-        key: "14",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
-    }
-];
-class Demo12 extends Component {
-  render() {
-    return (
-        <Table bordered columns={columns12} data={data12} scroll={{y:150 }} />
-    );
-  }
-}
-
-export default Demo12;

demo/demolist/Demo121.js

@@ -1,103 +0,0 @@
-/**
-*
-* @title 多选表格
-* @parent 行操作-选择
-* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
-*
-*/
-
-
-import React, { Component } from 'react';
-import {Checkbox} from "tinper-bee";
-
-import Table from '../../src';
-import multiSelect from "../../src/lib/multiSelect.js";
-
-const columns12 = [
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200,
-    sorter: (a, b) => a.c - b.c
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
-  }
-];
-
-const data12 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:false},
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false},
-  { a: "郭靖1", b: "男", c: 25,d:'大侠', key: "4" ,_disabled:true},
-  { a: "郭靖2", b: "男", c: 25,d:'大侠', key: "5" ,_checked:false}
-];
-//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
-let MultiSelectTable  = multiSelect(Table, Checkbox);
-
-class Demo12 extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data12
-    };
-  }
-  /**
-   *@param selectedList:当前选中的行数据
-   *@param record 当前操作行数据
-   *@param index 当前操作行索引
-   * @memberof Demo12
-   */
-  getSelectedDataFunc = (selectedList,record,index) => {
-    console.log("selectedList", selectedList,"index",index);
-    // 如果在回调中增加setState逻辑，需要同步data中的_checked属性。即下面的代码
-    // const allChecked = selectedList.length == 0?false:true;
-    // record为undefind则为全选或者全不选
-    // if(!record){
-    //   data12.forEach(item=>{
-    //     item._checked = allChecked;
-    //   })
-    // }else{
-    //   data12[index]['_checked'] = record._checked;
-    // } 
-
-    
-  };
-  
-  render() {
-    let multiObj = {
-      type: "checkbox"
-    };
-    return (
-      <MultiSelectTable 
-        columns={columns12} 
-        data={data12} 
-        multiSelect={multiObj}
-        rowClassName={(record,index,indent)=>{
-          if (record._checked) {
-              return 'selected';
-          } else {
-              return '';
-          }
-        }}
-        getSelectedDataFunc={this.getSelectedDataFunc}/>
-    );
-  }
-}
-
-export default Demo12;

demo/demolist/Demo131.js

@@ -1,81 +0,0 @@
-/**
-*
-* @title 万行以上数据渲染
-* @parent 无限滚动 Infinite-scroll
-* @description 万行数据渲染
-*/
-
-import React, { Component } from "react";
-import {Tooltip} from "tinper-bee";
-import Table from "../../src";
-import BigData from "../../src/lib/bigData";
-const BigDataTable = BigData(Table);
-const columns = [
-    {
-        title:'序号',
-        dataIndex:'index',
-        width:'60',
-        key:'index',
-        render:(text,record,index)=>{
-            return index
-        }
-    },
-    {
-    title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
-    render: (text, record, index) => {
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "inline-block",
-            width: "80px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "middle",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
-
-];
-
-const data = [ ...new Array(10000) ].map((e, i) => {
-    const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
-    if(i%3==0){
-        rs.b = '女';
-    }
-    return rs;
-   })
-
-
-class Demo30 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data,
-      selectedRowIndex: 0
-    }
-  }
-
-  render() {
-    return (
-        <BigDataTable
-          columns={columns}
-          data={data}
-          scroll={{y:300}}
-          height={40}
-          onRowClick={(record, index, indent) => {
-            console.log('currentIndex--'+index);
-          }}
-        />
-
-     
-    );
-  }
-}
-
-export default Demo30;

demo/demolist/Demo131.scss

@@ -1,3 +0,0 @@
-.big-data tr td {
-    // height: 48px;
-}

demo/demolist/Demo132.js

@@ -1,142 +0,0 @@
-/**
-*
-* @title 嵌套子表格滚动加载
-* @parent 无限滚动 Infinite-scroll
-* @description 通过expandedRowRender参数来实现子表格
-*
-*/
-
-import React, { Component } from "react";
-import {Popconfirm} from 'tinper-bee';
-import Table from "../../src";
-import BigData from "../../src/lib/bigData";
-const BigDataTable = BigData(Table);
-const outColumns = [
-  {
-    title: "操作",
-    dataIndex: "d",
-    key: "d", 
-    width:200,
-    render(text, record, index) {
-      return (
-        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-          <a href="javascript:;">
-            一些操作
-          </a>
-        </Popconfirm>
-      );
-    }
-  },
-  { title: "用户名", dataIndex: "a", key: "a", width: 250 },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
-  
-];
-const innerColumns = [
-  {
-    title: "操作",
-    dataIndex: "d",
-    key: "d",
-    width:200,
-    render(text, record, index) {
-      return (
-        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-          <a href="javascript:;">
-            一些操作
-          </a>
-        </Popconfirm>
-      );
-    }
-  },
-  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
-  
-];
-
-const data16 = [ ...new Array(10000) ].map((e, i) => {
-    return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
-   })
-
-
-
-
-
-class Demo31 extends Component {
-  constructor(props){
-    super(props);
-    this.state={
-      data_obj:{
-        0:[
-          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-          { a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
-        ],
-        1: [
-          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-          { a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
-        ],
-      }
-    }
-  }
-  expandedRowRender = (record, index, indent) => {
-    let height = 200;
-    let innderData = [ ...new Array(100) ].map((e, i) => {
-      return { a: index+"-"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key:  index+"-"+ i };
-     })
-    return (
-      <Table
-        
-        columns={innerColumns}
-        scroll={{y:height}}
-        data={innderData} 
-
-      />
-    );
-  };
-  getData=(expanded, record)=>{
-    //当点击展开的时候才去请求数据
-    let new_obj = Object.assign({},this.state.data_obj);
-    if(expanded){
-      if(record.key==='1'){
-        new_obj[record.key] = [
-          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-          { a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
-        ]
-        this.setState({
-          data_obj:new_obj
-        })
-      }else{
-        new_obj[record.key] = [
-          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-          { a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
-        ]
-        this.setState({
-          data_obj:new_obj
-        })
-      }
-    }
-  }
-  haveExpandIcon=(record, index)=>{
-    //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
-    if(index == 0){
-      return true;
-    }
-    return false;
-  }
-  render() {
-    return (
-      <BigDataTable
-        columns={outColumns}
-        data={data16}
-        onExpand={this.getData}
-        expandedRowRender={this.expandedRowRender}
-        scroll={{y:350}}
-        // defaultExpandedRowKeys={[0,1]}
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
-      />
-    );
-  }
-}
-
-export default Demo31;

demo/demolist/Demo133.js

@@ -1,90 +0,0 @@
-/**
-*
-* @title 多功能表格滚动加载
-* @parent 无限滚动 Infinite-scroll
-* @description
-*/
-
-import React, { Component } from "react";
-import {Tooltip,Checkbox,Icon,Popover} from "tinper-bee";
-import Table from "../../src";
-import BigData from "../../src/lib/bigData";
-import multiSelect from '../../src/lib/multiSelect';
-import filterColumn from '../../src/lib/filterColumn';
-
-let  ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);
-
-const columns = [
-    {
-        title:'序号',
-        dataIndex:'index',
-        width:'80',
-        key:'index',
-        render:(text,record,index)=>{
-            return index
-        }
-    },
-    {
-    title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
-    render: (text, record, index) => {
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "inline-block",
-            width: "80px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "middle",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
-];
-
-const data = [ ...new Array(10000) ].map((e, i) => {
-    const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
-    if(i%3==0){
-        rs.b = '女';
-    }
-    return rs;
-   })
-
-
-class Demo32 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data,
-      selectedRowIndex: 0
-    }
-  }
-  getSelectedDataFunc = data => {
-    console.log(data);
-  };
-
-  render() {
-    return (
-        <ComplexTable
-          columns={columns}
-          data={data}
-          parentNodeId='parent'
-          scroll={{y:300}}
-          height={40}
-          bordered
-          onRowClick={(record, index, indent) => {
-            this.setState({
-              selectedRowIndex: index
-            });
-          }}
-          getSelectedDataFunc={this.getSelectedDataFunc}/>
-
-    );
-  }
-}
-
-export default Demo32;

demo/demolist/Demo134.js

@@ -1,95 +0,0 @@
-/**
-* @title 层级树大数据场景
-* @parent 无限滚动 Infinite-scroll
-* @description
-*/
-import React, { Component } from "react";
-import {Tooltip} from "tinper-bee";
-
-import Table from "../../src";
-import BigData from "../../src/lib/bigData";
-const BigDataTable = BigData(Table);
-const columns = [
-    {
-        title:'序号',
-        dataIndex:'index',
-        width:'150',
-        key:'index',
-        render:(text,record,index)=>{
-            return index
-        }
-    },
-    {
-    title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
-    render: (text, record, index) => {
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "inline-block",
-            width: "80px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "middle",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
-];
-
-const data = [ ...new Array(1000) ].map((e, i) => {
-    const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
-    if(i%3==0){
-        rs.b = '女';
-        rs.children = [];
-        for(let subi=0;subi<3;subi++){
-          rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
-        }
-    }else{
-      rs.children = [];
-        for(let subi=0;subi<3;subi++){
-          rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
-        }
-    }
-    return rs;
-   })
-
-
-class Demo34 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data,
-      selectedRowIndex: 0
-    }
-  }
-  onExpandedRowsChange = (params)=>{
-    console.log(params);
-  }
-  onExpand = (expandKeys)=>{
-    console.log('expand---'+expandKeys);
-  }
-  render() {
-    return (
-        <BigDataTable
-          columns={columns}
-          data={data}
-          parentNodeId='parent'
-          scroll={{y:300}}
-          height={40}
-          onExpand={this.onExpand}
-          onRowClick={(record, index, indent) => {
-            console.log('currentIndex--'+index);
-          }}
-        />
-
-     
-    );
-  }
-}
-
-export default Demo34;

demo/demolist/Demo161.js

@@ -1,73 +0,0 @@
-/**
- * @title 表格+分页
- * @parent 分页 Pagination
- * @description 点击分页联动表格
- */
-
-import React, { Component } from "react";
-import {Pagination} from "tinper-bee";
-
-import Table from "../../src";
-
-const columns8 = [
-  { title: "姓名", dataIndex: "a", key: "a", width: 100 },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
-  }
-];
-
-const pageData = {
-  1: [
-    { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
-    { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
-    { a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
-  ],
-  2: [
-    { a: "芙蓉姐姐", b: "女", c: 23, d: "大侠", key: "1" },
-    { a: "芙蓉妹妹", b: "女", c: 23, d: "内行", key: "2" }
-  ]
-};
-
-class Demo8 extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: pageData[1],
-      activePage: 1
-    };
-  }
-
-  handleSelect(eventKey) {
-    this.setState({
-      data: pageData[eventKey],
-      activePage: eventKey
-    });
-  }
-
-  render() {
-    return (
-      <div className="demo8">
-        <Table columns={columns8} data={this.state.data} />
-        <Pagination
-          first
-          last
-          prev
-          next
-          maxButtons={5}
-          boundaryLinks
-          activePage={this.state.activePage}
-          onSelect={this.handleSelect.bind(this)}
-          onDataNumSelect={this.dataNumSelect}
-          showJump={true}
-          total={100}
-          dataNum={2}
-        />
-      </div>
-    );
-  }
-}
-export default Demo8;

demo/demolist/Demo161.scss

@@ -1,10 +0,0 @@
-.demo8{
-    .u-table {
-        margin-bottom: 11px;
-    }
-    .u-pagination{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-}

demo/demolist/Demo162.js

@@ -1,160 +0,0 @@
-/**
- *
- * @title 表格+搜索
- * @parent 搜索 search
- * @description 搜索刷新表格数据
- *
- */
-
-import React, { Component } from "react";
-import {Icon,FormControl,InputGroup} from "tinper-bee";
-
-import Table from "../../src";
-
-class Search extends Component {
-  state = {
-    searchValue: "",
-    empty: false
-  };
-
-  /**
-     * 搜索
-     */
-  handleSearch = () => {
-    let { onSearch } = this.props;
-    this.setState({
-      empty: true
-    });
-    onSearch && onSearch(this.state.searchValue);
-  };
-
-  /**
-     * 捕获回车
-     * @param e
-     */
-  handleKeyDown = e => {
-    if (e.keyCode === 13) {
-      this.handleSearch();
-    }
-  };
-
-  /**
-     * 输入框改变
-     * @param e
-     */
-  handleChange = (e) => {
-    this.setState({
-      searchValue: e
-    });
-  };
-
-  /**
-     * 清空输入框
-     */
-  emptySearch = () => {
-    let { onEmpty } = this.props;
-    this.setState({
-      searchValue: "",
-      empty: false
-    });
-    onEmpty && onEmpty();
-  };
-
-  render() {
-    return (
-      <InputGroup simple className="search-component">
-        <FormControl
-          onChange={this.handleChange}
-          value={this.state.searchValue}
-          onKeyDown={this.handleKeyDown}
-          placeholder="请输入用户名"
-          type="text"
-        />
-        {this.state.empty ? (
-          <Icon
-            type="uf-close-c"
-            onClick={this.emptySearch}
-            className="empty-search"
-          />
-        ) : null}
-
-        <InputGroup.Button onClick={this.handleSearch} shape="border">
-          <Icon type="uf-search" />
-        </InputGroup.Button>
-      </InputGroup>
-    );
-  }
-}
-
-const columns9 = [
-  {
-    title: "姓名",
-    dataIndex: "a",
-    key: "a",
-    width: 100
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
-  }
-];
-
-const userData = [
-  { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
-  { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
-  { a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
-];
-
-class Demo9 extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: userData
-    };
-  }
-
-  handleSearch = value => {
-    if (value === "") {
-      return this.setState({
-        data: userData
-      });
-    }
-    let regExp = new RegExp(value, "ig");
-    let data = userData.filter(item => regExp.test(item.a));
-    this.setState({
-      data
-    });
-  };
-
-  handleEmpty = () => {
-    this.setState({
-      data: userData
-    });
-  };
-
-  render() {
-    return (
-      <div>
-        <div className="clearfix">
-          <Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
-        </div>
-        <Table columns={columns9} data={this.state.data} />
-      </div>
-    );
-  }
-}
-
-export default Demo9;

demo/demolist/Demo21.js

@@ -1,60 +0,0 @@
-/**
-*
-* @title 渲染本地数据
-* @parent 数据操作 Data Opetation
-* @description 
-*/
-
-import React, { Component } from "react";
-import {Button,Tooltip} from "tinper-bee";
-import Table from "../../src";
-
-const columns = [
-  {
-    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
-    fixed:'left',
-    render: (text, record, index) => {
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "inline-block",
-            width: "60px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "middle",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
-];
-
-const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
-];
-
-class Demo21 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data
-    }
-  }
-
-  render() {
-    return (
-        <Table
-          columns={columns}
-          data={data}
-        />
-    );
-  }
-}
-
-export default Demo21;

demo/demolist/Demo32.js

@@ -1,121 +0,0 @@
-/**
- *
- * @title 多列表头
- * @parent 列渲染 Custom Render
- * @description columns[n] 可以内嵌 children，以渲染分组表头。
- * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
- *
- */
-
-import React, { Component } from "react";
-import Table from "../../src";
-import {Button} from "tinper-bee";
-
-const { ColumnGroup, Column } = Table;
-
-const columns = [
-  {
-    title: "Name",
-    dataIndex: "name",
-    key: "name",
-    width: 100,
-    fixed: "left"
-  },
-  {
-    title: "Other",
-    width:600,
-    children: [
-      {
-        title: "Age",
-        dataIndex: "age",
-        key: "age",
-        width: 200
-      },
-      {
-        title: "Address",
-        children: [
-          {
-            title: "Street",
-            dataIndex: "street",
-            key: "street",
-            width: 200
-          },
-          {
-            title: "Block",
-            children: [
-              {
-                title: "Building",
-                dataIndex: "building",
-                key: "building",
-                width: 100
-              },
-              {
-                title: "Door No.",
-                dataIndex: "number",
-                key: "number",
-                width: 100
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    title: "Company",
-    width:400,
-    children: [
-      {
-        title: "Company Address",
-        dataIndex: "companyAddress",
-        key: "companyAddress",
-        width:200,
-      },
-      {
-        title: "Company Name",
-        dataIndex: "companyName",
-        key: "companyName",
-        width:200,
-      }
-    ]
-  },
-  {
-    title: "Gender",
-    dataIndex: "gender",
-    key: "gender",
-    width: 60,
-    fixed: "right"
-  }
-];
-
-const data = [];
-for (let i = 0; i < 20; i++) {
-  data.push({
-    key: i,
-    name: "John Brown",
-    age: i + 1,
-    street: "Lake Park",
-    building: "C",
-    number: 2035,
-    companyAddress: "Lake Street 42",
-    companyName: "SoftLake Co",
-    gender: "M"
-  });
-}
-
-class Demo32 extends Component {
-  render() {
-    return (
-      <Table
-        className={'demo32'}
-        columns={columns}
-        data={data}
-        headerHeight={40} //自定义表头高度
-        bordered
-        scroll={{ y: 240 }}
-      />
-    );
-  }
-}
-
-export default Demo32;

demo/demolist/Demo32.scss

@@ -1,6 +0,0 @@
-.demo32{
-    .u-table-thead th {
-        padding-top: 0px;
-        padding-bottom: 0px;
-    }
-}

demo/demolist/Demo35.js

@@ -1,145 +0,0 @@
-/**
- *
- * @title 合并列后合计
- * @parent 列渲染 Custom Render
- * @description 合并标题后的合计,且支持多字段统计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
- *
- */
-
-import React, { Component } from "react";
-import {Button} from "tinper-bee";
-import Table from "../../src"; 
-import sum from "../../src/lib/sum.js";
- 
-let ComplexTable = sum(Table);
-
-const columns = [
-  {
-    title: "Name",
-    dataIndex: "name",
-    key: "name",
-    width: 120,
-    fixed: "left"
-  },
-  {
-    title: "Other",
-    children: [
-      {
-        title: "Age",
-        dataIndex: "age",
-        key: "age",
-        width: 200,
-        sumCol: true,
-      },
-      {
-        title: "Address",
-        children: [
-          {
-            title: "Street",
-            dataIndex: "street",
-            key: "street",
-            width: 200
-          },
-          {
-            title: "Block",
-            children: [
-              {
-                title: "Building",
-                dataIndex: "building",
-                key: "building",
-                width: 100
-              },
-              {
-                title: "Door No.",
-                dataIndex: "number",
-                key: "number",
-                // width: 100,
-                sumCol: true,
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  // {
-  //   title: "Company",
-  //   children: [
-  //     {
-  //       title: "Company Address",
-  //       dataIndex: "companyAddress",
-  //       key: "companyAddress",
-  //       width: 100,
-  //     },
-  //     {
-  //       title: "Company Name",
-  //       dataIndex: "companyName",
-  //       key: "companyName",
-  //       width: 100,
-  //     }
-  //   ]
-  // },
-  {
-    title: "Gender",
-    dataIndex: "gender",
-    key: "gender",
-    width: 80,
-    fixed: "right"
-  }
-];
-
-function getData(){
-  const data = [];
-  for (let i = 0; i < 5; i++) {
-    data.push({
-      key: i,
-      name: "John Brown"+i,
-      age: i + Math.floor(Math.random()*10),
-      street: "Lake Park",
-      building: "C",
-      number: 20 *  Math.floor(Math.random()*10),
-      companyAddress: "Lake Street 42",
-      companyName: "SoftLake Co",
-      gender: "M"
-    });
-  }
-  return data;
-}
-
-class Demo35 extends Component {
-  
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: getData()
-    };
-  }
-
-  changeData = ()=>{
-    this.setState({
-      data: getData()
-    });
-  }
-
-  render() {
-    const {data} = this.state;
-    return (
-      <div>
-        <Button 
-          className="editable-add-btn"
-          onClick={this.changeData}
-        >
-          动态设置数据源
-        </Button>
-
-         <ComplexTable 
-          columns={columns}
-          data={data}
-          bordered
-          // scroll={{ x: "130%", y: 140 }}
-        />
-      </div>
-    );
-  }
-}
-export default Demo35;

demo/demolist/Demo41.js

@@ -1,307 +0,0 @@
-/**
-*
-* @title 编辑态表格
-* @parent 编辑 Editor
-* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
-*
-*/
-
-import React from "react";
-import {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from "tinper-bee";
-import Table from "../../src";
-import Datepicker from "bee-datepicker";
-import renderInput from "../../build/render/InputRender.js";
-import renderDate from "../../build/render/DateRender.js";
-import renderSelect from "../../build/render/SelectRender.js";
-
-const InputRender = renderInput(Form, FormControl, Icon);
-const DateRender = renderDate(Datepicker, Icon);
-const SelectRender = renderSelect(Select, Icon);
-
-const format = "YYYY-MM-DD";
-const format2 = "YYYY-MM";
-const format3 = "YYYY-MM-DD HH:mm:ss";
-
-const dateInputPlaceholder = "选择日期";
-const dateInputPlaceholder2 = "选择年月";
-const dataSource = [
-  {
-    key: "boyuzhou",
-    value: "jack"
-  },
-  {
-    key: "renhualiu",
-    value: "lucy"
-  },
-  {
-    key: "yuzhao",
-    value: "yiminghe"
-  }
-];
-class Demo41 extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      dataSource: [
-        {
-          key: "0",
-          name: "沉鱼",
-          number: "10",
-          age: "y",
-          address: "jack",
-          datepicker: "2017-06-12",
-          MonthPicker: "2017-02"
-        },
-        {
-          key: "1",
-          name: "落雁",
-          number: "100",
-          age: "y",
-          address: "lucy",
-          datepicker: "2017-06-12",
-          MonthPicker: "2017-02"
-        },
-        {
-          key: "2",
-          name: "闭月",
-          number: "1000",
-          age: "n",
-          address: "lucy",
-          datepicker: "2017-06-12",
-          MonthPicker: "2017-02"
-        },
-        {
-          key: "3",
-          name: "羞花",
-          number: "9999",
-          age: "y",
-          address: "lucy",
-          datepicker: "2017-06-12",
-          MonthPicker: "2017-02"
-        }
-      ],
-      count: 4
-    };
-    this.columns = [
-      {
-        title: "普通输入",
-        dataIndex: "name",
-        key: "name",
-        width: "150px",
-        render: (text, record, index) => (
-          <InputRender
-            name="name"
-            placeholder="请输入姓名"
-            value={text}
-            isclickTrigger={true}
-            check={this.check}
-            onChange={this.onInputChange(index, "name")}
-            isRequire={true}
-            method="blur"
-            errorMessage={
-              <Tooltip overlay={"错误提示"}>
-                <Icon type="uf-exc-c" className="" />
-              </Tooltip>
-            }
-          />
-        )
-      },
-      {
-        title: "货币输入",
-        dataIndex: "number",
-        key: "number",
-        width: "150px",
-        render: (text, record, index) => (
-          <InputRender
-            format="Currency"
-            name="number"
-            placeholder="请输入货币"
-            value={text}
-            isclickTrigger={true}
-            check={this.check}
-            onChange={this.onInputChange(index, "number")}
-            isRequire={true}
-            method="blur"
-            errorMessage={
-              <Tooltip overlay={"错误提示"}>
-                <Icon type="uf-exc-c" className="" />
-              </Tooltip>
-            }
-            reg={/^[0-9]+$/}
-          />
-        )
-      },
-      {
-        title: "复选",
-        dataIndex: "age",
-        key: "age",
-        width: "100px",
-        render: (text, record, index) => (
-          <Checkbox
-            checked={record.age}
-            onChange={this.onCheckChange(index, "age")}
-          />
-        )
-      },
-      {
-        title: "下拉框",
-        dataIndex: "address",
-        key: "address",
-        width: "200px",
-        render: (text, record, index) => {
-          return (
-            <SelectRender
-              dataSource={dataSource}
-              isclickTrigger={true}
-              value={text}
-              onChange={this.onSelectChange(index, "address")}
-              size="sm"
-            >
-              <Option value="jack">boyuzhou</Option>
-              <Option value="lucy">renhualiu</Option>
-              <Option value="disabled" disabled>
-                Disabled
-              </Option>
-              <Option value="yiminghe">yuzhao</Option>
-            </SelectRender>
-          );
-        }
-      },
-      {
-        title: "年月日",
-        dataIndex: "datepicker",
-        key: "datepicker",
-        width: "200px",
-        render: (text, record, index) => {
-          return (
-            <DateRender
-              value={text}
-              isclickTrigger={true}
-              format={format}
-              onSelect={this.onDateSelect}
-              onChange={this.onDateChange}
-              placeholder={dateInputPlaceholder}
-            />
-          );
-        }
-      },
-      {
-        title: "年月",
-        dataIndex: "MonthPicker",
-        key: "MonthPicker",
-        width: "200px",
-        render: (text, record, index) => {
-          return (
-            <DateRender
-              value={text}
-              type="MonthPicker"
-              isclickTrigger={true}
-              format={format2}
-              onSelect={this.onSelect}
-              onChange={this.onChange}
-              placeholder={dateInputPlaceholder2}
-            />
-          );
-        }
-      }
-    ];
-  }
-  check = (flag, obj) => {
-    console.log(flag);
-    console.log(obj);
-  };
-
-  onInputChange = (index, key) => {
-    return value => {
-      const dataSource = [...this.state.dataSource];
-      dataSource[index][key] = value;
-      this.setState({ dataSource });
-    };
-  };
-  onCheckChange = (index, key) => {
-    return value => {
-      const dataSource = [...this.state.dataSource];
-      dataSource[index][key] = value;
-      this.setState({ dataSource });
-    };
-  };
-  onSelectChange = (index, key) => {
-    return value => {
-      console.log(`selected ${value}`);
-      const dataSource = [...this.state.dataSource];
-      dataSource[index][key] = value;
-      this.setState({ dataSource });
-    };
-  };
-  onDateChange = d => {
-    console.log(d);
-  };
-  onDateSelect = d => {
-    console.log(d);
-  };
-  onDelete = index => {
-    return () => {
-      const dataSource = [...this.state.dataSource];
-      dataSource.splice(index, 1);
-      this.setState({ dataSource });
-    };
-  };
-  handleAdd = () => {
-    const { count, dataSource } = this.state;
-    const newData = {
-      key: count,
-      name: `凤姐 ${count}`,
-      age: 32,
-      address: "jack",
-      datepicker: "2017-06-12",
-      MonthPicker: "2017-02"
-    };
-    this.setState({
-      dataSource: [...dataSource, newData],
-      count: count + 1
-    });
-  };
-
-  getBodyWrapper = body => {
-    return (
-      <Animate
-        transitionName="move"
-        component="tbody"
-        className={body.props.className}
-      >
-        {body.props.children}
-      </Animate>
-    );
-  };
-  getData = () => {
-    console.log(this.state.dataSource);
-  };
-  render() {
-    const { dataSource } = this.state;
-    const columns = this.columns;
-    return (
-      <div>
-        <Button
-          className="editable-add-btn"
-          onClick={this.handleAdd}
-        >
-          添加一行
-        </Button>
-        <Button
-          style={{marginLeft:"5px"}}
-          className="editable-add-btn"
-          onClick={this.getData}
-        >
-          获取数据
-        </Button>
-        <Table
-          data={dataSource}
-          columns={columns}
-          getBodyWrapper={this.getBodyWrapper}
-        />
-      </div>
-    );
-  }
-}
-
-export default Demo41;

demo/demolist/Demo51.js

@@ -1,61 +0,0 @@
-/**
-*
-* @title 左侧固定列
-* @parent 列操作-锁定 Fixed
-* @description 固定列到表格的左侧
-*
-*/
-
-
-
-import React, { Component } from 'react';
-import Table from '../../src';
-
-
-
-const columns5 = [
-  {
-    title: "Full Name",
-    width: 100,
-    dataIndex: "name",
-    key: "name",
-    fixed: "left"
-  },
-  { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
-  { title: "address", dataIndex: "address", key: "address" }
-];
-
-const data5 = [
-  {
-    key: "1",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
-  },
-  {
-    key: "2",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "3",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "4",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  }
-];
-
-class Demo51 extends Component {
-  render() {
-    return <Table columns={columns5} data={data5} scroll={{ x: "110%", y: 240 }}  />;
-  }
-}
-
-export default Demo51;

demo/demolist/Demo52.js

@@ -1,164 +0,0 @@
-/**
-*
-* @title 右侧固定列
-* @parent 列操作-锁定 Fixed
-* @description 固定列到表格的右侧
-*
-*/
-
-
-
-import React, { Component } from 'react';
-import {Popconfirm} from 'tinper-bee';
-import Table from '../../src';
-
-const columns5 = [
-    {
-        title: "序号",
-        dataIndex: "index",
-        key: "index",
-        width: 100, 
-    },
-    {
-        title: "订单编号",
-        dataIndex: "orderCode",
-        key: "orderCode",
-        width: 100, 
-    },
-    {
-        title: "供应商名称",
-        dataIndex: "supplierName",
-        key: "supplierName",
-        width: 100
-    },
-    {
-        title: "类型",
-        dataIndex: "type_name",
-        key: "type_name",
-        width: 100
-    },
-    {
-        title: "采购组织",
-        dataIndex: "purchasing",
-        key: "purchasing",
-        width: 100
-    },
-    {
-        title: "采购组",
-        dataIndex: "purchasingGroup",
-        key: "purchasingGroup",
-         width: 300
-    },
-    {
-        title: "凭证日期",
-        dataIndex: "voucherDate",
-        key: "voucherDate",
-        width: 100,
-        
-    },
-    {
-        title: "审批状态",
-        dataIndex: "approvalState_name",
-        key: "approvalState_name",
-        width: 100
-    },
-    {
-        title: "确认状态",
-        dataIndex: "confirmState_name",
-        key: "confirmState_name",
-         width: 100
-    }, 
-    {
-        title: "关闭状态",
-        dataIndex: "closeState_name",
-        key: "closeState_name",
-        width: 100
-    },
-    {
-        title: "操作",
-        dataIndex: "d",
-        key: "d",
-        width:100,
-        fixed: "right",
-        render(text, record, index) {
-            return (
-                <div className='operation-btn'>
-                  <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-                      <a href="javascript:;" tooltip={text} >
-                      一些操作
-                      </a>
-                  </Popconfirm>
-                </div>
-            )
-        }
-    }
-];
-
-const data5 = [
-    { 
-        index: 1, 
-        orderCode:"2343", 
-        supplierName: "xxx",
-        type_name: "123",
-        purchasing:'内行', 
-        purchasingGroup:"323",
-        voucherDate:"kkkk",
-        approvalState_name:"vvvv",
-        confirmState_name:"aaaa",
-        closeState_name:"vnnnnn",
-        d:"操作",
-        key: "1"
-    }, 
-    { 
-      index: 2, 
-      _checked:true,
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      d:"2操作",
-      key: "2"
-    },
-    { 
-      index: 3, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      _disabled:true,
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      d:"3操作",
-      key: "3"
-    },
-    { 
-      index: 4, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      d:"4操作",
-      key: "4"
-    },
-];
-
-class Demo52 extends Component {
-  render() {
-    return <Table columns={columns5} data={data5} scroll={{ x:true, y: 200 }}  />;
-  }
-}
-
-export default Demo52;

demo/demolist/Demo53.js

@@ -1,158 +0,0 @@
-/**
-*
-* @title 动态设置列锁定、解除锁定
-* @parent 列操作-锁定 Fixed
-* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
-*
-*/
-import React, { Component } from 'react';
-import {Icon,Menu,Dropdown} from "tinper-bee";
-
-import Table from '../../src';
-
-const { Item } = Menu;
-
-const columns24 = [
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100,
-    fixed: "left",
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100,
-    fixed: "left",
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 100, 
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d",
-    width: 150 
-  },
-  {
-    title: "对手",
-    dataIndex: "e",
-    key: "e",
-    width: 100 
-  },
-  {
-    title: "帮派",
-    dataIndex: "f",
-    key: "f",
-    width: 100 
-  },
-  {
-    title: "武功类型",
-    dataIndex: "g",
-    key: "g",
-    width: 150 
-  },
-  {
-    title: "师傅",
-    dataIndex: "k",
-    key: "k",
-    // width: 100 
-  },
-  {
-    title: "攻击系数",
-    dataIndex: "h",
-    key: "h",
-    width: 100 
-  }
-];
-
-
-const data24 = [
-  { a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" },
-  { a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" }
-]; 
- 
-class Demo24 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      columns:columns24
-    }
-  }
-  
-  onSelect = ({key,item})=>{ 
-    console.log(`${key} selected`); //获取key
-    let currentObject = item.props.data; //获取选中对象的数据
-    let {columns} = this.state;
-    let fixedCols = [];
-    let nonColums = [];
-    columns.find(da=>{
-      if(da.key == key){
-        da.fixed?delete da.fixed:da.fixed = 'left';
-      }
-      da.fixed?fixedCols.push(da):nonColums.push(da);
-    });
-  
-    columns = [...fixedCols,...nonColums]
-
-    this.setState({
-      columns
-    });
-  }
-  //表头增加下拉菜单
-  renderColumnsDropdown(columns) {
-    const icon ='uf-arrow-down';
-    
-    return columns.map((originColumn,index) => {
-      let column = Object.assign({}, originColumn);
-      let menuInfo = [], title='锁定';
-      if(originColumn.fixed){
-        title = '解锁'
-      }
-      menuInfo.push({
-        info:title,
-        key:originColumn.key,
-        index:index
-      });
-      const menu = (
-        <Menu onSelect={this.onSelect} >{
-            menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })
-            }
-        </Menu>)
-      column.title = (
-        <span className='title-con drop-menu'>
-          {column.title}
-          <Dropdown
-            trigger={['click']} 
-            overlay={menu}
-            animation="slide-up"
-          >
-           <Icon type={icon}/>
-          </Dropdown> 
-          
-        </span>
-      );
-      return column;
-    });
-    
-  }
-
-  render() {
-    let {columns} = this.state;
-    columns = this.renderColumnsDropdown(columns);
-    return(
-      <div className="demo24">
-        <Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
-      </div>
-    )
-  }
-}
-
-export default Demo24;

demo/demolist/Demo53.scss

@@ -1,18 +0,0 @@
-th{
-    .drop-menu{
-        .uf{
-            font-size: 12px;
-            visibility: hidden;
-            margin-left: 15px;
-        }
-        
-    
-    }
-    &:hover{
-        .uf{
-                visibility: visible;
-        }
-    }
-
-}
-

demo/demolist/Demo62.js

@@ -1,108 +0,0 @@
-/**
-*
-* @title 按条件、值过滤
-* @parent 列操作-过滤 Filter
-* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
-*
-*/
-
-
-import React, { Component } from 'react';
-import Table from '../../src';
-
-
-const columns26 = [
-  { title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
-  { title: "年龄", width: 150, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
-  { title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date", filterDropdown: "show", format: "YYYY-MM-DD" },
-  { title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "show" },
-  { title: "备注", dataIndex: "mark", key: "mark" }
-];
-
-const data26 = [
-  {
-    key: "1",
-    name: "John Brown",
-    age: 32,
-    date: "2018-09-19",
-    address: "朝阳区",
-    mark: "无"
-  },
-  {
-    key: "2",
-    name: "Jim Green",
-    age: 40,
-    date: "2018-09-18",
-    address: "朝阳区",
-    mark: "无"
-  },
-  {
-    key: "3",
-    name: "Jim Green",
-    age: 40,
-    date: "2018-09-18",
-    address: "东城区",
-    mark: "无"
-  },
-  {
-    key: "4",
-    name: "Jim Green",
-    age: 40,
-    date: "2018-09-18",
-    address: "东城区",
-    mark: "无"
-  }, {
-    key: "5",
-    name: "John Brown",
-    age: 32,
-    date: "2018-09-18",
-    address: "海淀区",
-    mark: "无"
-  },
-  {
-    key: "6",
-    name: "Jim Green",
-    age: 48,
-    date: "2018-09-18",
-    address: "海淀区",
-    mark: "无"
-  },
-  {
-    key: "7",
-    name: "Jim Green",
-    age: 40,
-    date: "2018-09-18",
-    address: "海淀区",
-    mark: "无"
-  },
-  {
-    key: "8",
-    name: "Jim Green",
-    age: 38,
-    date: "2018-09-18",
-    address: "海淀区",
-    mark: "无"
-  }
-];
-
-class Demo26 extends Component {
-  handlerFilterChange = (key, val, condition) => {
-    console.log('参数：key=', key, ' value=', val, 'condition=', condition);
-  }
-
-  handlerFilterClear = (key) => {
-    console.log('清除条件', key);
-  }
-  render() {
-    return <Table
-      onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
-      onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
-      filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
-      filterable={true}//是否开启过滤数据功能
-      bordered
-      columns={columns26}
-      data={data26} />;
-  }
-}
-
-export default Demo26;

demo/demolist/Demo63.js

@@ -1,201 +0,0 @@
-/**
-*
-* @title 复杂表格中行过滤
-* @parent 列操作-过滤 Filter
-* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
-*
-*/
-
-/**
- * @description 
- */
-
-import React, { Component } from 'react';
-import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
-
-import Table from '../../src';
-import multiSelect from '../../src/lib/multiSelect';
-import sort from '../../src/lib/sort';
-
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
-
-const data27 = [
-  {
-    key: "1",
-    name: "John Brown",
-    age: 32,
-    date: "2018-09-19",
-    address: "朝阳区",
-    mark: "无"
-  },
-  {
-    key: "2",
-    name: "Jim Green",
-    age: 40,
-    date: "2018-09-18",
-    address: "朝阳区",
-    mark: "无"
-  },
-  {
-    key: "3",
-    name: "Jim Green",
-    age: 40,
-    date: "2018-09-18",
-    address: "东城区",
-    mark: "无"
-  },
-  {
-    key: "4",
-    name: "Jim Green",
-    age: 40,
-    date: "2018-09-18",
-    address: "东城区",
-    mark: "无"
-  }, {
-    key: "5",
-    name: "John Brown",
-    age: 32,
-    date: "2018-09-18",
-    address: "海淀区",
-    mark: "无"
-  },
-  {
-    key: "6",
-    name: "Jim Green",
-    age: 48,
-    date: "2018-09-18",
-    address: "海淀区",
-    mark: "无"
-  },
-  {
-    key: "7",
-    name: "Jim Green",
-    age: 40,
-    date: "2018-09-18",
-    address: "海淀区",
-    mark: "无"
-  },
-  {
-    key: "8",
-    name: "Jim Green",
-    age: 38,
-    date: "2018-09-18",
-    address: "海淀区",
-    mark: "无"
-  }
-];
-
-
-const MultiSelectTable = multiSelect(Table, Checkbox);
-const ComplexTable = sort(MultiSelectTable, Icon);
-class Demo27 extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      dropdownvalue: []
-    }
-  }
-  handlerFilterChange = (key, val, condition) => {
-    console.log('参数：key=', key, ' value=', val, 'condition=', condition);
-  }
-
-  handlerFilterClear = (key) => {
-    console.log('清除条件', key);
-  }
-  getSelectedDataFunc = data => {
-    console.log(data);
-  }
-  onClick = (item) => {
-    console.log(item);
-  }
-
-  render() {
-    const menu1 = (
-      <Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
-        <SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
-          <MenuItemGroup title="Item 1">
-            <Menu.Item key="1">选项 1</Menu.Item>
-            <Menu.Item key="2">选项 2</Menu.Item>
-          </MenuItemGroup>
-          <MenuItemGroup title="Iteom 2">
-            <Menu.Item key="3">选项 3</Menu.Item>
-            <Menu.Item key="4">选项 4</Menu.Item>
-          </MenuItemGroup>
-        </SubMenu>
-      </Menu>)
-    let multiObj = {
-      type: "checkbox"
-    };
-    let columns27 = [
-      {
-        title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
-          return <Dropdown
-            trigger={['click']}
-            overlay={menu1}
-            animation="slide-up"
-          >
-            <Icon style={{ "visibility": "hidden" }} type="uf-eye" />
-          </Dropdown>
-        }
-      },
-      {
-        title: "姓名",
-        width: 180,
-        dataIndex: "name",
-        key: "name",
-        filterType: "text",//输入框类型
-        filterDropdown: "show",//显示条件
-        filterDropdownType: "string"//字符条件
-      },
-      {
-        title: "年龄",
-        width: 180,
-        dataIndex: "age",
-        key: "age",
-        filterType: "number",//输入框类型
-        filterDropdown: "show",//显示条件
-        filterDropdownType: "number"//字符条件
-      },
-      {
-        title: "日期",
-        width: 190,
-        dataIndex: "date",
-        key: "date",
-        filterType: "date",//输入框类型
-        filterDropdown: "show",//显示条件
-        filterDropdownType: "string"//字符条件
-      },
-      {
-        title: "时间范围",
-        width: 290,
-        dataIndex: "mark",
-        key: "mark",
-        filterType: "daterange",//输入框类型
-        filterDropdown: "show",//显示条件
-        filterDropdownType: "number"//字符条件
-      },
-      {
-        title: "地址",
-        width: 100,
-        dataIndex: "address",
-        key: "address",
-        filterType: "dropdown",//输入框类型
-        filterDropdown: "show",//显示条件
-        filterDropdownType: "number"//字符条件
-      }
-    ];
-    return <ComplexTable
-      onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
-      onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
-      filterDelay={500}//输入文本多少ms触发回调函数，默认500ms
-      filterable={true}//是否开启过滤数据功能
-      getSelectedDataFunc={this.getSelectedDataFunc}
-      bordered
-      multiSelect={multiObj}
-      columns={columns27}
-      data={data27} />;
-  }
-}
-
-export default Demo27;

demo/demolist/Demo71.js

@@ -1,101 +0,0 @@
-/**
-*
-* @title 列过滤面板
-* @parent 列操作-隐藏 Hide
-* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
-*
-*/
-
-
-import React, { Component } from 'react';
-import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
-
-import Table from '../../src';
-import filterColumn from '../../src/lib/filterColumn';
-import sum from '../../src/lib/sum';
-
-const data21 = [
-  { a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
-];
-
-const FilterColumnTable = filterColumn(Table, Popover, Icon);
-
-const defaultProps21 = {
-  prefixCls: "bee-table"
-};
-
-class Demo21 extends Component {
-  constructor(props) {
-    super(props);
-    this.state ={
-              columns21: [
-                {
-                  title: "名字",
-                  dataIndex: "a",
-                  key: "a"
-                  // width: 100
-                },
-                {
-                  title: "性别",
-                  dataIndex: "b",
-                  key: "b",
-                  // width: 100
-                },
-                {
-                  title: "年龄",
-                  dataIndex: "c",
-                  key: "c",
-                  ifshow:false,
-                  // width: 200,
-                  // sumCol: true,
-                  sorter: (a, b) => a.c - b.c
-                },
-                {
-                  title: "武功级别",
-                  dataIndex: "d",
-                  key: "d"
-                },
-                {
-                  title: "操作",
-                  dataIndex: "e",
-                  key: "e",
-                  render(text, record, index){
-                    return (
-                      <div  title={text} >
-                        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-                          <a href="javascript:;" tooltip={text} >
-                            一些操作
-                          </a>
-                        </Popconfirm>
-                      </div>
-                    );
-                  }
-                }
-              ]};
-  }
-  afterFilter = (optData,columns)=>{
-    if(optData.key == 'b'){
-        if(optData.ifshow){
-          columns[2].ifshow = false;
-        }else{
-          columns[2].ifshow = true;
-        }
-        this.setState({
-          columns21 :columns,
-          showFilterPopover:true
-        });
-    }
-    
-  }
- 
-  render() {
-    
-    return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;
-  }
-}
-Demo21.defaultProps = defaultProps21;
-
-
-export default Demo21;

demo/demolist/Demo81.js

@@ -1,67 +0,0 @@
-/**
-* @title 列排序
-* @parent 列操作-排序 Sort
-* @description  column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
-*
-*/
-
-
-import React, { Component } from 'react';
-import {Icon} from "tinper-bee";
-import Table from '../../src';
-import sort from "../../src/lib/sort.js";
-
-let ComplexTable = sort(Table, Icon);
-const columns11 = [
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200,
-    sorter: (a, b) => a.c - b.c
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
-  }
-];
-
-const data11 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
-];
-
-const defaultProps11 = {
-  prefixCls: "bee-table"
-};
-class Demo11 extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sortOrder: "",
-      data: data11
-    };
-  }
-  render() {
-
-    return <ComplexTable columns={columns11} data={this.state.data} />;
-  }
-}
-Demo11.defaultProps = defaultProps11;
-
-
-export default Demo11;

demo/demolist/Demo82.js

@@ -1,83 +0,0 @@
-/**
-* @title 后端列排序
-* @parent 列操作-排序 Sort
-* @description 将控制台打印的参数传递给后端即可进行列排序
-*/
-
-
-import React, { Component } from 'react';
-import {Icon} from "tinper-bee";
-import Table from '../../src';
-import sort from "../../src/lib/sort.js";
-let ComplexTable = sort(Table, Icon);
-
-const columns11 = [
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200,
-    sorter: (a, b) => a.c - b.c
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
-  },
-  {
-    title: "分数",
-    dataIndex: "e",
-    key: "e",
-    sorter: (a, b) => a.c - b.c
-  },
-];
-
-const data11 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
-];
-
-const defaultProps = {
-  prefixCls: "bee-table"
-};
-class Demo28 extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sortOrder: "",
-      data: data11
-    };
-  }
-  /**
-   * 后端获取数据
-   */
-  sortFun = (sortParam)=>{
-    console.info(sortParam);
-    //将参数传递给后端排序
-  }
-  render() {
-    let sortObj = {
-      mode:'multiple',
-      backSource:true,
-      sortFun:this.sortFun
-    }
-    return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;
-  }
-}
-Demo28.defaultProps = defaultProps;
-
-
-export default Demo28;

demo/demolist/Demo83.js

@@ -1,134 +0,0 @@
-/**
- *
- * @title 多列排序
- * @parent 列操作-排序 Sort
- * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
- *
- */
-
-import React, { Component } from "react";
-import {Checkbox,Button,Icon} from "tinper-bee";
-import Table from "../../src";
-import multiSelect from "../../src/lib/multiSelect.js";
-import sort from "../../src/lib/sort.js";
-import sum from "../../src/lib/sum.js";
-
-const columns13 = [
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    className:'dfasd',
-    width: 200
-  },
-  {
-    title: "功力指数",
-    dataIndex: "b",
-    key: "b",
-    width: 200,
-    sumCol: true,
-    sorter: (a, b) => a.c - b.c,
-    sorterClick:(data,type)=>{//排序的回调函数
-      //type value is up or down
-      console.log("data",data);
-    }
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200,
-    sumCol: true,
-    sorter: (a, b) => a.c - b.c,
-    sorterClick:(data,type)=>{//排序的回调函数
-      //type value is up or down
-      console.log("data",data);
-    }
-  },
-  {
-    title: "成绩",
-    dataIndex: "e",
-    key: "e",
-    width: 200,
-    sumCol: true,
-    sorter: (a, b) => a.c - b.c,
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d",
-    width: 200
-  }
-];
-
-const data13 = [
-  { a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
-  { a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
-  { a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
-  { a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
-  { a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
-];
-
-
-//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
-let ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);
-
-class Demo13 extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data13: data13,
-      selectedRow: this.selectedRow,
-      selectDisabled: this.selectDisabled
-    };
-  }
-  getSelectedDataFunc = data => {
-    console.log(data);
-  };
-  selectDisabled = (record, index) => {
-    // console.log(record);
-    if (index === 1) {
-      return true;
-    }
-    return false;
-  };
-  selectedRow = (record, index) => {
-    // console.log(record);
-    if (index === 0) {
-      return true;
-    }
-    return false;
-  };
-  onClick = () => {
-    this.setState({
-      selectedRow: function() {}
-    });
-  };
-
-  render() {
-    let multiObj = {
-      type: "checkbox"
-    };
-    let sortObj = {
-      mode:'multiple'
-    }
-   
-    return (
-      <div>
-        <Button className="editable-add-btn" onClick={this.onClick}>
-          change selectedRow
-        </Button>
-        <ComplexTable
-          selectDisabled={this.state.selectDisabled}
-          selectedRow={this.state.selectedRow}
-          columns={columns13}
-          data={this.state.data13}
-          multiSelect={multiObj}
-          sort={sortObj}
-          getSelectedDataFunc={this.getSelectedDataFunc}
-        />
-      </div>
-    );
-  }
-}
-export default Demo13;

demo/demolist/Demo91.js

@@ -1,69 +0,0 @@
-/**
-*
-* @title 拖拽改变列顺序
-* @parent 列操作-拖拽 Drag
-* @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
-*/
-import React, { Component } from 'react';
-import {Icon} from "tinper-bee";
-
-import Table from '../../src'; 
-import dragColumn from '../../src/lib/dragColumn';
-
-const columns22 = [
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 200
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200,
-    sumCol: true,
-    sorter: (a, b) => a.c - b.c
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d",
-    width: 200,
-  }
-];
-
-const data22 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
-];
-
-const DragColumnTable = dragColumn(Table);
-
-const defaultProps22 = {
-  prefixCls: "bee-table"
-};
-
-class Demo22 extends Component {
-  constructor(props) {
-    super(props); 
-  }
- 
-  render() {
-    return <DragColumnTable columns={columns22} data={data22} bordered
-    
-    draggable={true} 
-    />;
-  }
-}
-Demo22.defaultProps = defaultProps22;
-
-
-export default Demo22;

demo/demolist/Demo92.js

@@ -67,7 +67,7 @@ class Demo23 extends Component {
     draggable={true} 
     scroll={{y:200}}
     onDropBorder ={(e,width)=>{
-      console.log(width+"--调整列宽后触发事件",e.target);
+      // console.log(width+"--调整列宽后触发事件",e.target);
     }}
     />;
   }

dist/demo.css

@@ -35,6 +35,8 @@
         color: #1565c0; }
   .u-table thead tr:last-child {
     border-bottom: 1px solid #C1C7D0; }
+  .u-table thead tr > th:last-child {
+    border-right: none; }
   .u-table tr:hover td .uf-eye {
     visibility: visible !important; }
   .u-table tr tr a {
@@ -604,37 +606,4 @@
   .opt-btns .u-button:hover, .opt-btns .u-button:active {
     background: #344563; }
 
-.demo02 .u-table-placeholder i {
-  font-size: 60px; }
-
-.demo04.u-table tr:nth-child(2n) {
-  background: #f7f9fb; }
-
-.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
-  background: #ebecf0; }
-
-
-.demo8 .u-table {
-  margin-bottom: 11px; }
-
-.demo8 .u-pagination {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  align-items: center;
-  -ms-flex-pack: center;
-  justify-content: center; }
-
-.demo32 .u-table-thead th {
-  padding-top: 0px;
-  padding-bottom: 0px; }
-
-th .drop-menu .uf {
-  font-size: 12px;
-  visibility: hidden;
-  margin-left: 15px; }
-
-th:hover .uf {
-  visibility: visible; }
-
 /*# sourceMappingURL=demo.css.map */

src/Table.scss

@@ -76,7 +76,9 @@ $icon-color:#505F79;
     tr:last-child{
       border-bottom: 1px solid $table-th-bottom-border;
     }
-   
+    tr>th:last-child{
+      border-right: none;
+    }
   }
   tr {
     // transition: all 0.3s ease;