fix:querySelector容错处理

build/Table.css

@@ -218,6 +218,15 @@
       color: #1565c0; }
     .u-table tr tr a:active {
       color: #1565c0; }
+  .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) {
+    display: flex;
+    flex-direction: row-reverse; }
+    .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con {
+      height: 15px; }
+      .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .uf {
+        padding-left: 0; }
+      .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .u-table-row-expand-icon {
+        width: 0; }
   .u-table tr.tr-row-hover {
     background: rgb(235, 236, 240); }
   .u-table th,

build/TableCell.js

@@ -119,6 +119,9 @@ var TableCell = function (_Component) {
     if (typeof text == 'string' && bodyDisplayInRow) {
       title = text;
     }
+    if (expandIcon && expandIcon.props.expandable) {
+      className = className + (' ' + clsPrefix + '-has-expandIcon');
+    }
     return _react2["default"].createElement(
       'td',
       {

build/TableHeader.js

@@ -307,7 +307,7 @@ var TableHeader = function (_Component) {
       if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
       if (target.nodeName.toUpperCase() === "TH") {
         // target.style.border = "2px dashed rgba(5,0,0,0.25)";
-        target.setAttribute("style", "border-right:2px dashed rgba(5,0,0,0.25)");
+        target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
         // target.style.backgroundColor = 'rgb(235, 236, 240)';
       }
     };
@@ -515,7 +515,7 @@ var TableHeader = function (_Component) {
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
       table.tr = tableDome.getElementsByTagName("tr");
-      table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
+      table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
     }
 
     table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');

build/TableRow.js

@@ -252,7 +252,7 @@ var TableRow = function (_Component) {
         }
       }
       if (type) {
-        currentObj && currentObj.setAttribute("style", "border-bottom:2px dashed rgba(5,0,0,0.25)");
+        currentObj && currentObj.setAttribute("style", "border-bottom:2px dashed rgb(30, 136, 229)");
       } else {
         currentObj && currentObj.setAttribute("style", "");
       }

build/lib/multiSelect.js

@@ -214,6 +214,7 @@ function multiSelect(Table, Checkbox) {
       });
 
       var _defaultColumns = [{
+        className: 'u-table-multiSelect-column',
         title: _react2["default"].createElement(Checkbox, _extends({
           className: "table-checkbox"
         }, checkAttr, {

demo/demolist/Demo1101.js

@@ -9,8 +9,7 @@
 import React, { Component } from "react";
 import { Popconfirm,Icon } from 'tinper-bee';
 import Table from "../../src";
-import dragColumn from '../../src/lib/dragColumn';
+
-const DragColumnTable = dragColumn(Table);
 const columns16 = [
   {
     title: "操作",
@@ -60,7 +59,6 @@ const data16 = [
   { a: "NU0391003", b: "2019-05-03", c: "zz供应商", d: "操作", key: "3" }
 ];
 
-
 class Demo16 extends Component {
   constructor(props){
     super(props);
@@ -111,14 +109,13 @@ class Demo16 extends Component {
   }
   render() {
     return (
-      <DragColumnTable
+      <Table
+        className="expanded-table"
         columns={columns16}
         data={data16}
         onExpand={this.getData}
         expandedRowRender={this.expandedRowRender}
         scroll={{x:true}}
-        dragborder={true} 
-        draggable={true} 
         collapsedIcon={<Icon type='uf-anglearrowpointingtoright'/>}
         expandedIcon={<Icon type='uf-treearrow-down'/>}
       />

demo/demolist/Demo1101.scss

@@ -0,0 +1,5 @@
+.expanded-table{
+    .expand-icon-con .uf{
+        font-size: 12px;
+    }
+}

dist/demo.css

@@ -203,6 +203,17 @@
       color: #1565c0; }
     .u-table tr tr a:active {
       color: #1565c0; }
+  .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse; }
+    .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con {
+      height: 15px; }
+      .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .uf {
+        padding-left: 0; }
+      .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .u-table-row-expand-icon {
+        width: 0; }
   .u-table tr.tr-row-hover {
     background: rgb(235, 236, 240); }
   .u-table th,
@@ -1065,6 +1076,9 @@ th .drop-menu .uf {
 th:hover .uf {
   visibility: visible; }
 
+.expanded-table .expand-icon-con .uf {
+  font-size: 12px; }
+
 
 .demo8 .u-table {
   margin-bottom: 11px; }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.1.4-alpha.4",
+ "version": "2.1.4-alpha.5",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -93,4 +93,4 @@
   "reqwest": "^2.0.5",
   "tinper-bee": "latest"
  }
-}
+}

src/Table.scss

@@ -102,6 +102,19 @@ $icon-color:#505F79;
         color: #1565c0;
       }
     }
+    td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body){
+      display: flex;
+      flex-direction: row-reverse;
+      .expand-icon-con {
+        height: 15px;
+        .uf{
+          padding-left: 0;
+        }
+        .u-table-row-expand-icon {
+          width: 0;
+        }
+      }
+    }
   }
   tr.tr-row-hover {
     background: $hover-bg-color-base;

src/TableCell.js

@@ -74,6 +74,9 @@ class TableCell extends Component{
     if(typeof text == 'string' && bodyDisplayInRow){
       title = text
     }
+    if(expandIcon && expandIcon.props.expandable){ 
+      className = className+` ${clsPrefix}-has-expandIcon`
+    }
     return (
       <td
         colSpan={colSpan}

src/TableHeader.js

@@ -76,7 +76,7 @@ class TableHeader extends Component {
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
       table.tr = tableDome.getElementsByTagName("tr");
-      table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
+      table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
     }
 
     table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
@@ -475,7 +475,7 @@ class TableHeader extends Component {
     if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
     if(target.nodeName.toUpperCase() === "TH"){
       // target.style.border = "2px dashed rgba(5,0,0,0.25)";
-      target.setAttribute("style","border-right:2px dashed rgba(5,0,0,0.25)");
+      target.setAttribute("style","border-right:2px dashed rgb(30, 136, 229)");
       // target.style.backgroundColor = 'rgb(235, 236, 240)';
     }
   }

src/TableRow.js

@@ -290,7 +290,7 @@ class TableRow extends Component{
       }
     }
     if(type){
-      currentObj && currentObj.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
+      currentObj && currentObj.setAttribute("style","border-bottom:2px dashed rgb(30, 136, 229)");
     }else{
       currentObj && currentObj.setAttribute("style","");
     }

src/lib/multiSelect.js

@@ -164,6 +164,7 @@ export default function multiSelect(Table, Checkbox) {
       })
 
       let _defaultColumns =[{
+          className: 'u-table-multiSelect-column',
           title: (
             <Checkbox
               className="table-checkbox"
@@ -174,7 +175,7 @@ export default function multiSelect(Table, Checkbox) {
           ),
           key: "checkbox",
           dataIndex: "checkbox",
-         fixed:"left",
+          fixed:"left",
           width: 49, 
           render: (text, record, index) => {
             let attr = {};