支持用户自定义展开和关闭图标

dist/demo.css

@@ -209,6 +209,9 @@
     .u-table th.text-right,
     .u-table td.text-right {
       text-align: right; }
+    .u-table th .expand-icon-con,
+    .u-table td .expand-icon-con {
+      cursor: pointer; }
   .u-table-sm td {
     padding: 8px 8px; }
   .u-table-lg td {

docs/api.md

@@ -85,7 +85,8 @@ import 'bee-table/build/Table.css';
 | headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
 | bodyDisplayInRow |  设置表体的内容显示一行，超出显示省略号 | bool | 
 | rowDraggAble  | 是否增加行交换顺序功能 | boolean| false
-
+|expandedIcon|嵌套表格场景中展开子表时的展开图标|||
+|collapsedIcon|嵌套表格场景中关闭子表时的关闭图标|||
 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)
 
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*

src/ExpandIcon.js

@@ -20,16 +20,20 @@ class ExpandIcon extends Component{
     return !shallowequal(nextProps, this.props);
   }
   render() {
-    const { expandable, clsPrefix, onExpand, needIndentSpaced, expanded, record, isHiddenExpandIcon } = this.props;
+    const { expandable, clsPrefix, onExpand, needIndentSpaced, expanded, record, isHiddenExpandIcon,expandedIcon,collapsedIcon } = this.props;
     if (expandable && !isHiddenExpandIcon) {
       const expandClassName = expanded ? 'expanded' : 'collapsed';
-      return (
-        <Icon
-          className={`${clsPrefix}-expand-icon ${clsPrefix}-${expandClassName}`}
-          type={expanded ? 'uf-triangle-down' : 'uf-triangle-right'}
-          onClick={(e) => onExpand(!expanded, record, e)}
-        />
-      );
+      let currentIcon =  <Icon
+                          className={`${clsPrefix}-expand-icon ${clsPrefix}-${expandClassName}`}
+                          type={expanded ? 'uf-triangle-down' : 'uf-triangle-right'}
+                        
+                        />;
+      if(expanded && expandedIcon){
+        currentIcon = expandedIcon;
+      }else if(!expanded && collapsedIcon){
+        currentIcon = collapsedIcon;
+      }
+      return (<span onClick={(e) => onExpand(!expanded, record, e)} className='expand-icon-con'>{currentIcon}</span>);
     } else if (needIndentSpaced || isHiddenExpandIcon) {
       return <span className={`${clsPrefix}-expand-icon ${clsPrefix}-spaced`} />;
     }

src/Table.js

@@ -702,6 +702,8 @@ class Table extends Component {
           onDragRow={this.onDragRow}
           contentTable={this.contentTable}
           tableUid = {this.tableUid}
+          expandedIcon={props.expandedIcon}
+          collapsedIcon={props.collapsedIcon}
         />
       );
       this.treeRowIndex++;

src/Table.scss

@@ -117,6 +117,9 @@ $icon-color:#505F79;
     &.text-right{
       text-align: right;
     }
+    .expand-icon-con{
+      cursor: pointer;
+    }
   }
   &-sm {
     td {

src/TableRow.js

@@ -353,6 +353,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
     } = this.props;
     let showSum = false;
     let { className } = this.props;
@@ -373,6 +374,8 @@ class TableRow extends Component{
         needIndentSpaced={needIndentSpaced}
         expanded={expanded}
         record={record}
+        expandedIcon={expandedIcon}
+        collapsedIcon={collapsedIcon}
         isHiddenExpandIcon={isHiddenExpandIcon}
       />
     );