fix:设置expandIconAsCell后样式错乱的问题

build/Table.css

@@ -179,6 +179,9 @@
   overflow: hidden; }
   .u-table-body {
     position: relative; }
+    .u-table-body .u-table-row-expand-columns-in-body .expand-icon-con {
+      display: none;
+      pointer-events: none; }
   .u-table-hiden-drag {
     position: relative; }
     .u-table-hiden-drag-li {
@@ -221,12 +224,16 @@
   .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):nth-last-child(1):last-child {
+      border-right: none; }
     .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; }
+      height: 14px; }
       .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; }
+        padding: 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; }
+        width: 2px; }
+    .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .u-checkbox {
+      margin: 0; }
   .u-table tr.tr-row-hover {
     background: rgb(235, 236, 240); }
   .u-table th,
@@ -245,7 +252,10 @@
       text-align: right; }
     .u-table th .expand-icon-con,
     .u-table td .expand-icon-con {
-      cursor: pointer; }
+      cursor: pointer;
+      display: inline-block;
+      font-size: 12px;
+      line-height: 12px; }
   .u-table-sm td {
     padding: 8px 8px; }
   .u-table-lg td {
@@ -337,13 +347,12 @@
   .u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
     cursor: pointer;
     display: inline-block;
-    margin-right: 0px;
+    margin-right: 8px;
     width: 14px;
     height: 14px;
     text-align: center;
     line-height: 14px;
-    user-select: none;
+    user-select: none; }
-    margin-right: 10px; }
     .u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
       font-size: 12px;
       padding: 0; }

build/Table.js

@@ -908,7 +908,7 @@ var Table = function (_Component) {
   };
 
   Table.prototype.getRows = function getRows(columns, fixed) {
-    //统计index，只有含有鼠表结构才有用，因为数表结构时，固定列的索引取值有问题
+    //统计index，只有含有树表结构才有用，因为树表结构时，固定列的索引取值有问题
     this.treeRowIndex = 0;
     var rs = this.getRowsByData(this.state.data, true, 0, columns, fixed);
     return rs;
@@ -993,7 +993,8 @@ var Table = function (_Component) {
         footerScroll = _props3.footerScroll,
         headerScroll = _props3.headerScroll,
         _props3$hideHeaderScr = _props3.hideHeaderScroll,
-        hideHeaderScroll = _props3$hideHeaderScr === undefined ? false : _props3$hideHeaderScr;
+        hideHeaderScroll = _props3$hideHeaderScr === undefined ? false : _props3$hideHeaderScr,
+        expandIconAsCell = _props3.expandIconAsCell;
     var _props4 = this.props,
         useFixedHeader = _props4.useFixedHeader,
         data = _props4.data;
@@ -1172,9 +1173,10 @@ var Table = function (_Component) {
     }
     var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
     var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
+    var expandIconWidth = expandIconAsCell ? 33 : 0;
     var parStyle = {};
     if (!fixed) {
-      parStyle = { 'marginLeft': leftFixedWidth, 'marginRight': rightFixedWidth };
+      parStyle = { 'marginLeft': leftFixedWidth + expandIconWidth, 'marginRight': rightFixedWidth };
     }
     return _react2["default"].createElement(
       'div',

build/TableRow.js

@@ -560,13 +560,13 @@ var TableRow = function (_Component) {
       collapsedIcon: collapsedIcon,
       isHiddenExpandIcon: isHiddenExpandIcon
     });
-
+    var isExpandIconAsCell = expandIconAsCell ? clsPrefix + '-expand-columns-in-body' : '';
     for (var i = 0; i < columns.length; i++) {
       if (expandIconAsCell && i === 0 && !showSum) {
         cells.push(_react2["default"].createElement(
           'td',
           {
-            className: clsPrefix + '-expand-icon-cell',
+            className: clsPrefix + '-expand-icon-cell ' + isExpandIconAsCell,
             key: 'rc-table-expand-icon-cell-' + i
           },
           expandIcon

demo/demolist/Demo1101.js

@@ -2,20 +2,21 @@
 *
 * @title 嵌套子表格
 * @parent 扩展行 Expanded Row
-* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。
+* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。注意：多选功能和嵌套表格一起使用时，需要设置 expandIconAsCell={true}，把展开按钮放在单元格中展示。
 * demo1101
 */
 
 import React, { Component } from "react";
-import { Popconfirm,Icon } from 'tinper-bee';
+import { Popconfirm,Icon,Checkbox } from 'tinper-bee';
 import Table from "../../src";
+import multiSelect from "../../src/lib/multiSelect";
 
 const columns16 = [
   {
     title: "操作",
     dataIndex: "d",
     key: "d", 
-    width:200,
+    width:100,
     render(text, record, index) {
       return (
         <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
@@ -32,25 +33,9 @@ const columns16 = [
   
 ];
 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 },
+  { title: "供应商", dataIndex: "c", key: "c", width: 200 }
-  
 ];
 
 const data16 = [
@@ -58,7 +43,7 @@ const data16 = [
   { a: "NU0391002", b: "2018-11-02", c: "yy供应商", d: "操作", key: "2" },
   { a: "NU0391003", b: "2019-05-03", c: "zz供应商", d: "操作", key: "3" }
 ];
-
+const MultiSelectTable = multiSelect(Table,Checkbox);
 class Demo16 extends Component {
   constructor(props){
     super(props);
@@ -100,6 +85,7 @@ class Demo16 extends Component {
       }
     }
   }
+
   haveExpandIcon=(record, index)=>{
     //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
     if(index == 0){
@@ -107,15 +93,16 @@ class Demo16 extends Component {
     }
     return false;
   }
+
   render() {
     return (
-      <Table
+      <MultiSelectTable
         className="expanded-table"
         columns={columns16}
         data={data16}
         onExpand={this.getData}
         expandedRowRender={this.expandedRowRender}
-        scroll={{x:true}}
+        expandIconAsCell={true}
         collapsedIcon={<Icon type='uf-anglearrowpointingtoright'/>}
         expandedIcon={<Icon type='uf-treearrow-down'/>}
       />

dist/demo.css

@@ -164,6 +164,9 @@
   overflow: hidden; }
   .u-table-body {
     position: relative; }
+    .u-table-body .u-table-row-expand-columns-in-body .expand-icon-con {
+      display: none;
+      pointer-events: none; }
   .u-table-hiden-drag {
     position: relative; }
     .u-table-hiden-drag-li {
@@ -208,12 +211,16 @@
     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):nth-last-child(1):last-child {
+      border-right: none; }
     .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; }
+      height: 14px; }
       .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; }
+        padding: 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; }
+        width: 2px; }
+    .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .u-checkbox {
+      margin: 0; }
   .u-table tr.tr-row-hover {
     background: rgb(235, 236, 240); }
   .u-table th,
@@ -232,7 +239,10 @@
       text-align: right; }
     .u-table th .expand-icon-con,
     .u-table td .expand-icon-con {
-      cursor: pointer; }
+      cursor: pointer;
+      display: inline-block;
+      font-size: 12px;
+      line-height: 12px; }
   .u-table-sm td {
     padding: 8px 8px; }
   .u-table-lg td {
@@ -324,7 +334,7 @@
   .u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
     cursor: pointer;
     display: inline-block;
-    margin-right: 0px;
+    margin-right: 8px;
     width: 14px;
     height: 14px;
     text-align: center;
@@ -332,8 +342,7 @@
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
-    user-select: none;
+    user-select: none; }
-    margin-right: 10px; }
     .u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
       font-size: 12px;
       padding: 0; }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.1.6-beta.4",
+ "version": "2.1.6-alpha.1",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/Table.js

@@ -768,7 +768,7 @@ class Table extends Component {
   }
 
   getRows(columns, fixed) {
-    //统计index，只有含有鼠表结构才有用，因为数表结构时，固定列的索引取值有问题
+    //统计index，只有含有树表结构才有用，因为树表结构时，固定列的索引取值有问题
     this.treeRowIndex = 0;
     let rs = this.getRowsByData(this.state.data, true, 0, columns, fixed);
     return rs;
@@ -846,7 +846,7 @@ class Table extends Component {
 
   getTable(options = {}) {
     const { columns, fixed } = options;
-    const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll,hideHeaderScroll = false } = this.props;
+    const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll,hideHeaderScroll = false,expandIconAsCell } = this.props;
     let { useFixedHeader,data } = this.props;
     const bodyStyle = { ...this.props.bodyStyle };
     const headStyle = {};
@@ -1018,9 +1018,10 @@ class Table extends Component {
     }
     const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
     const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
+    let expandIconWidth = expandIconAsCell ? 33 : 0;
     let parStyle = {}
     if(!fixed){
-      parStyle = {'marginLeft':leftFixedWidth,'marginRight':rightFixedWidth}
+      parStyle = {'marginLeft':leftFixedWidth + expandIconWidth,'marginRight':rightFixedWidth}
     }
     return <div style={parStyle}>{headTable}{BodyTable}</div>;
   }

src/Table.scss

@@ -32,6 +32,10 @@ $icon-color:#505F79;
   &-body{
     // overflow: hidden!important;
     position: relative;
+    .u-table-row-expand-columns-in-body .expand-icon-con {
+      display: none;
+      pointer-events: none;
+    }
   }
   &-hiden-drag{
     position: relative;
@@ -105,15 +109,21 @@ $icon-color:#505F79;
     td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body){
       display: flex;
       flex-direction: row-reverse;
+      &:nth-last-child(1):last-child {
+        border-right: none;
+      }
       .expand-icon-con {
-        height: 15px;
+        height: 14px;
         .uf{
-          padding-left: 0;
+          padding: 0;
         }
         .u-table-row-expand-icon {
-          width: 0;
+          width: 2px;
         }
       }
+      .u-checkbox {
+        margin: 0;
+      }
     }
   }
   tr.tr-row-hover {
@@ -138,6 +148,9 @@ $icon-color:#505F79;
     }
     .expand-icon-con{
       cursor: pointer;
+      display: inline-block;
+      font-size: 12px;
+      line-height: 12px;
     }
   }
   &-sm {
@@ -299,13 +312,12 @@ $icon-color:#505F79;
     &-expand-icon {
       cursor: pointer;
       display: inline-block;
-      margin-right: 0px;
+      margin-right: 8px;
       width: 14px;
       height: 14px;
       text-align: center;
       line-height: 14px;
       user-select: none;
-      margin-right: 10px;
       &.uf{
         font-size: 12px;
         padding: 0;

src/TableRow.js

@@ -444,12 +444,12 @@ class TableRow extends Component{
         isHiddenExpandIcon={isHiddenExpandIcon}
       />
     );
-
+    let isExpandIconAsCell = expandIconAsCell ? `${clsPrefix}-expand-columns-in-body` : '';
     for (let i = 0; i < columns.length; i++) {
       if (expandIconAsCell && i === 0 && !showSum ) {
         cells.push(
           <td
-            className={`${clsPrefix}-expand-icon-cell`}
+            className={`${clsPrefix}-expand-icon-cell ${isExpandIconAsCell}`}
             key={`rc-table-expand-icon-cell-${i}`}
           >
             {expandIcon}