fix: expandIconAsCell={true}，表格错行

build/Table.css

@@ -274,6 +274,10 @@
       display: inline-block;
       font-size: 12px;
       line-height: 12px; }
+      .u-table th .expand-icon-con .uf,
+      .u-table td .expand-icon-con .uf {
+        padding: 0;
+        font-size: 12px; }
   .u-table-sm td {
     padding: 8px 8px; }
   .u-table-lg td {

build/Table.js

@@ -172,6 +172,8 @@ var defaultProps = {
   showRowNum: false
 };
 
+var expandIconCellWidth = Number(43);
+
 var Table = function (_Component) {
   _inherits(Table, _Component);
 
@@ -439,11 +441,13 @@ var Table = function (_Component) {
     // console.log('this.scrollTop**********',this.scrollTop);
   };
 
-  Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+  Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    // fix: 挪到 componentWillReceiveProps 中处理，解决 ie11 滚动加载，导致浏览器崩溃的问题
+    // 展开行后追加了新的DOM，必须在此阶段同步高度并重新渲染
-    // if (this.columnManager.isAnyColumnsFixed()) {
+    if (this.state.expandedRowKeys.length > 0) {
-    //   this.syncFixedTableRowHeight();
+      if (this.columnManager.isAnyColumnsFixed()) {
-    // }
+        this.syncFixedTableRowHeight();
+      }
+    }
     //适应模态框中表格、以及父容器宽度变化的情况
     if (typeof this.props.scroll.x !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) {
       this.computeTableWidth();
@@ -474,8 +478,9 @@ var Table = function (_Component) {
   };
 
   Table.prototype.computeTableWidth = function computeTableWidth() {
-
+    var expandIconAsCell = this.props.expandIconAsCell;
     //如果用户传了scroll.x按用户传的为主
+
     var setWidthParam = this.props.scroll.x;
 
     if (typeof setWidthParam == 'number') {
@@ -489,8 +494,9 @@ var Table = function (_Component) {
       this.contentWidth = this.contentDomWidth; //默认与容器宽度一样
     }
     var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
+    var expandColWidth = expandIconAsCell ? expandIconCellWidth : 0;
     var lastShowIndex = computeObj.lastShowIndex;
-    this.computeWidth = computeObj.computeWidth;
+    this.computeWidth = computeObj.computeWidth + expandColWidth;
 
     this.domWidthDiff = this.contentDomWidth - this.computeWidth;
     if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
@@ -636,7 +642,8 @@ var Table = function (_Component) {
         key: 'u-table-expandIconAsCell',
         className: clsPrefix + '-expand-icon-th',
         title: '',
-        rowSpan: rows.length
+        rowSpan: rows.length,
+        width: expandIconCellWidth
       });
     }
     var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
@@ -984,7 +991,8 @@ var Table = function (_Component) {
         lazyStartIndex: lazyCurrentIndex,
         lazyEndIndex: lazyEndIndex,
         centerColumnsLength: this.centerColumnsLength,
-        leftColumnsLength: this.leftColumnsLength
+        leftColumnsLength: this.leftColumnsLength,
+        expandIconCellWidth: expandIconCellWidth
       })));
       this.treeRowIndex++;
       var subVisible = visible && isRowExpanded;

build/TableRow.js

@@ -571,7 +571,8 @@ var TableRow = function (_Component) {
         collapsedIcon = _props9.collapsedIcon,
         hoverKey = _props9.hoverKey,
         lazyStartIndex = _props9.lazyStartIndex,
-        lazyEndIndex = _props9.lazyEndIndex;
+        lazyEndIndex = _props9.lazyEndIndex,
+        expandIconCellWidth = _props9.expandIconCellWidth;
 
     var showSum = false;
     var className = this.props.className;
@@ -609,7 +610,8 @@ var TableRow = function (_Component) {
           'td',
           {
             className: clsPrefix + '-expand-icon-cell ' + isExpandIconAsCell,
-            key: 'rc-table-expand-icon-cell-' + i
+            key: 'rc-table-expand-icon-cell-' + i,
+            width: expandIconCellWidth
           },
           expandIcon
         ));

dist/demo.css

@@ -261,6 +261,10 @@
       display: inline-block;
       font-size: 12px;
       line-height: 12px; }
+      .u-table th .expand-icon-con .uf,
+      .u-table td .expand-icon-con .uf {
+        padding: 0;
+        font-size: 12px; }
   .u-table-sm td {
     padding: 8px 8px; }
   .u-table-lg td {

src/Table.js

@@ -107,6 +107,8 @@ const defaultProps = {
   showRowNum: false,
 };
 
+const expandIconCellWidth = Number(43);
+
 class Table extends Component {
   constructor(props) {
     super(props);
@@ -241,11 +243,13 @@ class Table extends Component {
 
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
-    // fix: 挪到 componentWillReceiveProps 中处理，解决 ie11 滚动加载，导致浏览器崩溃的问题
+    // 展开行后追加了新的DOM，必须在此阶段同步高度并重新渲染
-    // if (this.columnManager.isAnyColumnsFixed()) {
+    if (this.state.expandedRowKeys.length > 0) {
-    //   this.syncFixedTableRowHeight();
+      if(this.columnManager.isAnyColumnsFixed()) {
-    // }
+        this.syncFixedTableRowHeight();
+      }
+    }
     //适应模态框中表格、以及父容器宽度变化的情况
     if (typeof (this.props.scroll.x) !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) {
       this.computeTableWidth();
@@ -295,7 +299,7 @@ class Table extends Component {
   }
 
   computeTableWidth() {
-
+    let {expandIconAsCell} = this.props;
     //如果用户传了scroll.x按用户传的为主
     let setWidthParam = this.props.scroll.x
 
@@ -311,8 +315,9 @@ class Table extends Component {
 
     }
     const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
+    const expandColWidth = expandIconAsCell ? expandIconCellWidth : 0;
     let lastShowIndex = computeObj.lastShowIndex;
-    this.computeWidth = computeObj.computeWidth;
+    this.computeWidth = computeObj.computeWidth + expandColWidth;
 
     this.domWidthDiff = this.contentDomWidth - this.computeWidth;
     if (typeof (setWidthParam) == 'string' && setWidthParam.indexOf('%')) {
@@ -449,6 +454,7 @@ class Table extends Component {
         className: `${clsPrefix}-expand-icon-th`,
         title: '',
         rowSpan: rows.length,
+        width: expandIconCellWidth
       });
     }
     const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
@@ -827,6 +833,7 @@ class Table extends Component {
           lazyEndIndex = {lazyEndIndex}
           centerColumnsLength={this.centerColumnsLength}
           leftColumnsLength={this.leftColumnsLength}
+          expandIconCellWidth={expandIconCellWidth}
         />
       );
       this.treeRowIndex++;

src/Table.scss

@@ -182,6 +182,10 @@ $icon-color:#505F79;
       display: inline-block;
       font-size: 12px;
       line-height: 12px;
+      .uf{
+        padding: 0;
+        font-size: 12px;
+      }
     }
   }
   &-sm {

src/TableRow.js

@@ -449,7 +449,7 @@ class TableRow extends Component{
       clsPrefix, columns, record, height, visible, index,
       expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble,
       expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
-      ,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex
+      ,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth
     } = this.props;
     let showSum = false;
     let { className } = this.props;
@@ -488,6 +488,7 @@ class TableRow extends Component{
           <td
             className={`${clsPrefix}-expand-icon-cell ${isExpandIconAsCell}`}
             key={`rc-table-expand-icon-cell-${i}`}
+            width={expandIconCellWidth}
           >
             {expandIcon}
           </td>