拖拽支持字符串宽度

demo/demolist/Demo16.js

@@ -12,7 +12,7 @@ const columns16 = [
   {
     title: "操作",
     dataIndex: "d",
-    key: "d",
+    key: "d", 
     fixed:'left',
     width:200,
     render(text, record, index) {
@@ -28,7 +28,7 @@ const columns16 = [
       );
     }
   },
-  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
+  { title: "用户名", dataIndex: "a", key: "a", width: 1500 },
   { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
   { title: "年龄", dataIndex: "c", key: "c", width: 200 },
   
@@ -120,6 +120,7 @@ class Demo16 extends Component {
         data={data16}
         onExpand={this.getData}
         expandedRowRender={this.expandedRowRender}
+        scroll={{x:true}}
         title={currentData => <div>标题: 这是一个标题</div>}
         footer={currentData => <div>表尾: 我是小尾巴</div>}
       />

demo/demolist/Demo23.js

@@ -14,19 +14,19 @@ const columns23 = [
     title: "名字",
     dataIndex: "a",
     key: "a",
-    width: 100
+    width: '10%'
   },
   {
     title: "性别",
     dataIndex: "b",
     key: "b",
-    width: 200
+    width: '200'
   },
   {
     title: "年龄",
     dataIndex: "c",
     key: "c",
-    width: 200,
+    width: '200',
     sumCol: true,
     sorter: (a, b) => a.c - b.c
   },
@@ -34,6 +34,7 @@ const columns23 = [
     title: "武功级别",
     dataIndex: "d",
     key: "d",
+    fixed:'right',
     width: 200,
   }
 ];

demo/demolist/Demo25.js

@@ -118,54 +118,10 @@ const dataList = [
       voucherDate:"kkkk",
       approvalState_name:"vvvv",
       confirmState_name:"aaaa",
-      closeState_name:"vnnnnn",
+      closeState_name:"vnnnnnvnnnnnvnnnnnvnnnnnvnnnnnvnnnnnvnnnnnvnnnnnvnnnnnvnnnnnvnnnnnvnnnnn",
       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"
-  },
+  }
 ]
 
 const DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);
@@ -191,6 +147,12 @@ class Demo25 extends Component {
     console.log("sum",sum);
     return (sum);
   }
+  onExpand = (expandedKeys) => {
+    this.setState({
+      expandedKeys,
+      autoExpandParent: false,
+    });
+  }
 
   selectedRow=(record, index)=>{
 
@@ -207,7 +169,7 @@ class Demo25 extends Component {
     checkMinSize={7}
     draggable={true}
     multiSelect={{type: "checkbox"}}
-    scroll={{x:"130%", y: 100}}
+    scroll={{x:"130%", y: true}}
     selectedRow={this.selectedRow}
     // scroll={{x:this.getCloumnsScroll(columns), y: 150}}
     /></div>

dist/demo.css

@@ -8470,7 +8470,7 @@ ul {
     padding-right: 0px; }
   .u-table-fixed-header .u-table-body-inner {
     height: 100%;
-    overflow: auto; }
+    overflow: scroll; }
   .u-table-fixed-header .u-table-scroll .u-table-header {
     overflow-x: scroll;
     padding-bottom: 20px;
@@ -8642,6 +8642,9 @@ ul {
     .u-table-thead-th .th-drag-gap-hover {
       background: #ccc;
       cursor: col-resize; }
+    .u-table-thead-th.th-can-not-drag .th-drag-gap-hover {
+      cursor: none;
+      width: 0px; }
   .u-table-thead-th:last-child-drag-gap {
     border: none; }
   .u-table-filter-column-pop-cont {

src/Table.scss

@@ -113,7 +113,7 @@ $table-move-in-color: $bg-color-base;
 
   &-fixed-header &-body-inner {
     height: 100%;
-    overflow: auto;
+    overflow: scroll;
   }
 
 
@@ -379,6 +379,12 @@ $table-move-in-color: $bg-color-base;
         background: #ccc;
         cursor: col-resize;
       }
+      &.th-can-not-drag{
+        .th-drag-gap-hover{
+          cursor: none;
+          width: 0px;
+        }
+      }
     }
     &-th:last-child {
       &-drag-gap{

src/TableHeader.js

@@ -101,7 +101,7 @@ class TableHeader extends Component {
     this.drag.initLeft = tryParseInt(event.target.style.left);
     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;
     const styleWidth = contentTableDom.style.width;
     if (styleWidth && (typeof (styleWidth) == 'number' || styleWidth.includes('px'))) {
@@ -109,6 +109,13 @@ class TableHeader extends Component {
     } else {
       this.contentTableWidth = parseInt(contentTableDom.scrollWidth)
     }
+    const dragColWidth = this.drag.data[this.drag.currIndex].width;
+    if(typeof(dragColWidth)=='string' && dragColWidth.indexOf('%')){
+      this.drag.width = this.contentTableWidth * parseInt(dragColWidth) /100
+    }else{
+      this.drag.width = parseInt(this.drag.data[this.drag.currIndex].width);
+    }
+    
   }
   onMouseUp = (event, data) => {
     this.border = false;
@@ -288,11 +295,13 @@ class TableHeader extends Component {
                 let thHover = da.drgHover ? ` ${clsPrefix}-thead th-drag-hover` : "";
                 delete da.drgHover;
                 let fixedStyle = '';
+                let canDotDrag = '';
                 if (!fixed && da.fixed) {
                   fixedStyle = `${clsPrefix}-row-fixed-columns-in-body`;
                 }
                 if (lastShowIndex == i) {
                   da.width = parseInt(da.width) + contentWidthDiff;
+                  canDotDrag = 'th-can-not-drag'
                 }
                 if (draggable) {
                   return (<th {...da}
@@ -309,7 +318,7 @@ class TableHeader extends Component {
                     style={{ width: da.width }}
                     onMouseMove={(event) => { this.onThMouseMove(event, da) }}
                     onMouseUp={(event) => { this.onThMouseUp(event, da) }}
-                    className={`${da.className} ${clsPrefix}-thead-th  ${fixedStyle}`}
+                    className={`${da.className} ${clsPrefix}-thead-th ${canDotDrag}  ${fixedStyle}`}
                     key={i} >
                     {da.children}
                     <div ref={el => this.gap = el}