新增序号展示功能

src/ColumnManager.js

@@ -7,7 +7,7 @@ import Icon from 'bee-icon';
 export default class ColumnManager {
   _cached = {}
 
-  constructor(columns, elements,originWidth,rowDraggAble) {
+  constructor(columns, elements,originWidth,rowDraggAble,showRowNum) {
     //判断是否使用行拖拽
     if(rowDraggAble) {
       let dragHandleColumn =[{
@@ -23,10 +23,32 @@ export default class ColumnManager {
       }]
       columns = dragHandleColumn.concat(columns);
     }
+    columns = this.addOrderColumn(columns,showRowNum);
+    
     this.columns = columns || this.normalize(elements);
+
     this.originWidth = originWidth;
   }
 
+  // 向数据列中添加一列:序号
+  addOrderColumn = (columns, showRowNum) => {
+    if(!showRowNum)return columns;
+    let order = {
+      dataIndex: showRowNum.key || '_index',
+      key:'_index',
+      fixed:showRowNum.fixed || 'left',
+      width:showRowNum.width || 50,
+      title: showRowNum.name || '序号',
+    }
+    if(columns.length > 0 && columns[0].dataIndex !== 'checkbox' && columns[0].dataIndex !== 'radio'){ // 多选表格/单选表格时放在第二列,其他情况放到第一列
+      columns = [order].concat(columns);
+    }
+    else{
+      columns.splice(1,0,order); // splice方法改变原数组,返回切割出的数组,此处为[]
+    }
+    return columns;
+  }
+
   isAnyColumnsFixed() {
     return this._cache('isAnyColumnsFixed', () => {
       return this.columns.some(column => !!column.fixed);
@@ -169,7 +191,8 @@ export default class ColumnManager {
     return element && (element.type === Column || element.type === ColumnGroup);
   }
 
-  reset(columns, elements) {
+  reset(columns, elements, showRowNum) {
+    columns = this.addOrderColumn(columns,showRowNum);
     this.columns = columns || this.normalize(elements);
     this._cached = {};
   }

src/Table.js

@@ -58,7 +58,10 @@ const propTypes = {
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   rowDraggAble: PropTypes.bool,
   onDropRow: PropTypes.func,
-  onDragRowStart: PropTypes.func
+  onDragRowStart: PropTypes.func,
+  bodyDisplayInRow: PropTypes.bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
+  headerDisplayInRow: PropTypes.bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
+  showRowNum: PropTypes.object, // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
 };
 
 const defaultProps = {
@@ -96,7 +99,10 @@ const defaultProps = {
   size: 'md',
   rowDraggAble:false,
   onDropRow: ()=>{},
-  onDragRowStart: ()=>{}
+  onDragRowStart: ()=>{},
+  bodyDisplayInRow: true,
+  headerDisplayInRow: true,
+  showRowNum: true,
 };
 
 class Table extends Component {
@@ -104,7 +110,7 @@ class Table extends Component {
     super(props);
     let expandedRowKeys = [];
     let rows = [...props.data];
-    this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, props.rowDraggAble);
+    this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, props.rowDraggAble, props.showRowNum); // 加入props.showRowNum参数
     this.store = createStore({ currentHoverKey: null });
     this.firstDid = true;
     if (props.defaultExpandAllRows) {
@@ -190,12 +196,12 @@ class Table extends Component {
       });
     }
     if (nextProps.columns && nextProps.columns !== this.props.columns) {
-      this.columnManager.reset(nextProps.columns);
+      this.columnManager.reset(nextProps.columns, null, this.props.showRowNum); // 加入this.props.showRowNum参数
       if(nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable){
          this.scrollTop = this.bodyTable.scrollTop;
      }
     } else if (nextProps.children !== this.props.children) {
-      this.columnManager.reset(null, nextProps.children);
+      this.columnManager.reset(null, nextProps.children,this.porps.showRowNum); // 加入this.props.showRowNum参数
     }
     //适配lazyload
     if(nextProps.scrollTop > -1){
@@ -245,6 +251,7 @@ class Table extends Component {
   }
 
   componentWillUnmount() {
+    // 移除绑定事件,避免内存泄漏
     this.contentTable = null;
     EventUtil.removeHandler(this.contentTable,'keydown',this.onKeyDown);
     EventUtil.removeHandler(this.contentTable,'focus',this.onFocus);
@@ -674,6 +681,9 @@ class Table extends Component {
     const lazyEndIndex =  props.lazyLoad && props.lazyLoad.endIndex ?props.lazyLoad.endIndex :-1;
     for (let i = 0; i < data.length; i++) {
       let isHiddenExpandIcon;
+      if ( props.showRowNum ){
+        data[i][props.showRowNum.key || '_index'] = i + (props.showRowNum.base || 0);
+      } 
       const record = data[i];
       const key = this.getRowKey(record, i);
       const childrenColumn = record[childrenColumnName];
@@ -885,7 +895,7 @@ class Table extends Component {
     const { columns, fixed } = options;
     const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll,hideHeaderScroll = false,expandIconAsCell } = this.props;
     let { useFixedHeader,data } = this.props;
-    const bodyStyle = { ...this.props.bodyStyle };
+    const bodyStyle = { ...this.props.bodyStyle };  // 这里为什么不写在上面?
     const headStyle = {};
     const innerBodyStyle = {};
     const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);