拖拽优化

dist/demo.css

@@ -5258,6 +5258,18 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
   .u-panel .u-panel-body {
     padding: 15px 15px;
     position: relative; }
+    .u-panel .u-panel-body .uf {
+      position: absolute;
+      right: 25px;
+      top: 30px;
+      color: #fff;
+      font-size: 20px;
+      padding: 2px 8px;
+      margin: 8px;
+      border-radius: 4px;
+      cursor: pointer; }
+      .u-panel .u-panel-body .uf:hover {
+        color: #a8a7a7; }
 
 .u-panel-default {
   border-color: #ddd; }
@@ -7533,7 +7545,7 @@ ul {
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   box-sizing: border-box;
-  z-index: 1050;
+  z-index: 1800;
   left: -9999px;
   top: -9999px;
   position: absolute;
@@ -8294,7 +8306,7 @@ ul {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1600;
+  z-index: 1900;
   opacity: .7;
   filter: blur(0.5px);
   background-color: #fff; }
@@ -9072,7 +9084,7 @@ ul {
   position: absolute;
   left: -9999px;
   top: -9999px;
-  z-index: 1000; }
+  z-index: 1800; }
 
 .rc-calendar-picker-hidden {
   display: none; }

src/Table.js

@@ -564,7 +564,8 @@ class Table extends Component{
     const headStyle = {};
 
     let tableClassName = '';
-    if (scroll.x || fixed) {
+    //表格元素的宽度大于容器的宽度也显示滚动条
+    if (scroll.x || fixed || this.contentDomWidth<this.contentWidth) {
       tableClassName = `${clsPrefix}-fixed`;
       if(!footerScroll){
         bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
@@ -607,7 +608,7 @@ class Table extends Component{
       ) : null;
       let _drag_class = this.props.dragborder?"table-drag-bordered":""
       return (
-        <table className={` ${tableClassName} table table-bordered ${_drag_class} `} style={tableStyle}  >
+        <table className={` ${tableClassName}  table-bordered ${_drag_class} `} style={tableStyle}  >
           {this.props.dragborder?null:this.getColGroup(columns, fixed)}
           {hasHead ? this.getHeader(columns, fixed) : null}
           {tableBody}

src/TableHeader.js

@@ -100,8 +100,9 @@ class TableHeader extends Component{
     this.drag.x = this.drag.initLeft;
     this.drag.currIndex = this.props.rows[0].findIndex(da=>da.key==data.key);
     this.drag.width = this.drag.data[this.drag.currIndex].width;
+    let contentTableDom = document.getElementById("u-table-drag-thead-"+this.theadKey).parentNode;
     
-    this.contentTableWidth = contentTable.width;
+    this.contentTableWidth = contentTableDom.style.width?parseInt(contentTableDom.style.width):parseInt(contentTableDom.scrollWidth);
   }
   onMouseUp=(event,data)=>{
     this.border = false;
@@ -116,10 +117,14 @@ class TableHeader extends Component{
     if(!this.border)return;
     const {dragborderKey,contentTable} = this.props;
     let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft-0;
+    let contentTableDom = document.getElementById("u-table-drag-thead-"+this.theadKey).parentNode;
+    
     if(!this.contentTableWidth){
-      this.contentTableWidth = contentTable.clientWidth;
+      this.contentTableWidth = contentTableDom.style.width?parseInt(contentTableDom.style.width):parseInt(contentTableDom.scrollWidth);
     }
+    // console.log(this.contentTableWidth,x);
     const newTableWidth = this.contentTableWidth + x;
+    // console.log(newTableWidth);
     const newWidth = this.drag.width + x;
     if(newWidth<this.props.minColumnWidth){
       //清楚样式
@@ -153,8 +158,9 @@ class TableHeader extends Component{
     let  currentDom = document.getElementById("u-table-drag-thead-"+this.theadKey).getElementsByTagName("th")[this.drag.currIndex];
     currentDom.style.width = newWidth+"px"; 
     // this.contentTableWidth = newTableWidth;
-    let contentTableDom = document.getElementById("u-table-drag-thead-"+this.theadKey).parentNode;
+   
     contentTableDom.style.width = newTableWidth+'px';
+    
     this.drag.x = x; 
 
   }