示例重置

build/Table.css

@@ -19,7 +19,7 @@
     border-collapse: collapse;
     text-align: left; }
   .u-table th {
-    font-weight: normal;
+    font-weight: bold;
     text-align: left; }
     .u-table th[colspan] {
       text-align: center; }
@@ -33,6 +33,8 @@
         color: #1565c0; }
       .u-table td a:active {
         color: #1565c0; }
+  .u-table thead tr:last-child {
+    border-bottom: 1px solid #C1C7D0; }
   .u-table tr:hover td .uf-eye {
     visibility: visible !important; }
   .u-table tr tr a {
@@ -48,8 +50,8 @@
     padding: 12px 8px;
     word-break: break-all; }
   .u-table tr.filterable th {
-    padding-top: 4px;
+    padding-top: 5px !important;
-    padding-bottom: 4px; }
+    padding-bottom: 5px !important; }
     .u-table tr.filterable th .filterContext {
       height: 35px; }
   .u-table-row-hover {
@@ -60,6 +62,10 @@
     border: 1px solid rgb(193, 199, 208);
     box-sizing: border-box;
     table-layout: fixed; }
+  .u-table-bordered .u-table-header > table {
+    border-bottom: 0; }
+  .u-table-bordered .u-table-header ~ .u-table-body table, .u-table-bordered .u-table-header ~ .u-table-body-outer table {
+    border-top: 0px; }
   .u-table-bordered th {
     border-bottom: 1px solid rgb(193, 199, 208);
     box-sizing: border-box; }
@@ -84,8 +90,7 @@
   .u-table-fixed-header .u-table-fixed-left .u-table-body-inner {
     padding-right: 0px; }
   .u-table-fixed-header .u-table-body-inner {
-    height: 100%;
+    height: 100%; }
-    overflow: scroll; }
   .u-table-fixed-header .u-table-scroll .u-table-header {
     overflow-x: scroll;
     padding-bottom: 20px;
@@ -281,6 +286,7 @@
     overflow-y: scroll;
     color: #212121; }
   .u-table-filter-column-clear-setting {
+    cursor: pointer;
     margin-bottom: 4px; }
   .u-table-filter-column-cont {
     position: relative; }
@@ -304,7 +310,9 @@
       margin: 0px; }
   .u-table-filter-column-pop-cont-item > span {
     margin-left: -3px;
-    width: 132px;
+    max-width: 132px;
+    width: auto !important;
+    min-width: 56px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -509,11 +517,17 @@
 .u-filter-dropdown-menu-wrap {
   z-index: 1800; }
   .u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
-    line-height: 32px;
+    line-height: 28px;
-    height: 32px;
+    height: 28px;
     padding: 0px 16px 0 16px;
     cursor: pointer; }
 
+.filter-wrap .u-form-control {
+  height: 28px; }
+
+.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
+  height: 28px; }
+
 .u-row-hover {
   position: absolute;
   right: 24px;

build/Table.js

@@ -933,7 +933,7 @@ var Table = function (_Component) {
 
             if (this.domWidthDiff <= 0) {
               headStyle.marginBottom = scrollbarWidth + 'px';
-              bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
+              // bodyStyle.marginBottom = `-${scrollbarWidth}px`;
             } else {
               innerBodyStyle.overflowX = 'auto';
             }
@@ -950,7 +950,7 @@ var Table = function (_Component) {
               headStyle.overflow = 'hidden';
               innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
             } else {
-              bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
+                // bodyStyle.marginBottom = `-${scrollbarWidth}px`;
               }
           } else {
             headStyle.marginBottom = '-' + scrollbarWidth + 'px';
@@ -1047,7 +1047,8 @@ var Table = function (_Component) {
             onTouchStart: this.detectScrollTarget,
             onScroll: this.handleBodyScroll
           },
-          renderTable(!useFixedHeader)
+          renderTable(!useFixedHeader),
+          _react2["default"].createElement('div', { className: 'scroll-dom', style: { height: this.scrollbarWidth + 'px' } })
         )
       );
     }

demo/demolist/Demo5.js

@@ -53,7 +53,7 @@ const data5 = [
 
 class Demo5 extends Component {
   render() {
-    return <Table columns={columns5} data={data5} scroll={{ x: "110%", y: 140 }} />;
+    return <Table columns={columns5} data={data5} scroll={{ x: "110%", y: 340 }} bodyStyle={{height:'340px'}} />;
   }
 }
 

dist/demo.css

@@ -90,8 +90,7 @@
   .u-table-fixed-header .u-table-fixed-left .u-table-body-inner {
     padding-right: 0px; }
   .u-table-fixed-header .u-table-body-inner {
-    height: 100%;
+    height: 100%; }
-    overflow: scroll; }
   .u-table-fixed-header .u-table-scroll .u-table-header {
     overflow-x: scroll;
     padding-bottom: 20px;

src/Table.js

@@ -796,7 +796,7 @@ class Table extends Component {
       
            if(this.domWidthDiff <= 0){
               headStyle.marginBottom = `${scrollbarWidth}px`;
-              bodyStyle.marginBottom = `-${scrollbarWidth}px`;
+              // bodyStyle.marginBottom = `-${scrollbarWidth}px`;
             }else{
               innerBodyStyle.overflowX = 'auto';
             }
@@ -813,7 +813,7 @@ class Table extends Component {
               headStyle.overflow = 'hidden';
               innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
             }else{
-              bodyStyle.marginBottom = `-${scrollbarWidth}px`;
+              // bodyStyle.marginBottom = `-${scrollbarWidth}px`;
             }
             
           }else{
@@ -908,6 +908,7 @@ class Table extends Component {
             onScroll={this.handleBodyScroll}
           >
             {renderTable(!useFixedHeader)}
+            <div className="scroll-dom" style={{height:`${this.scrollbarWidth}px`}}></div>
           </div>
         </div>
       );

src/Table.scss

@@ -184,7 +184,7 @@ $table-head-font-weight: bold;
 
   &-fixed-header &-body-inner {
     height: 100%;
-    overflow: scroll;
+    // overflow: scroll;
   }