自定义整行整列样式

build/Table.css

@@ -456,8 +456,8 @@
     -moz-user-select: -moz-none;
     -khtml-user-select: none;
     -webkit-user-select: none;
-    /*
+    /*
-        Introduced in IE 10. 
+        Introduced in IE 10. 
       */
     -ms-user-select: none;
     user-select: none; }

build/TableCell.js

@@ -436,7 +436,7 @@ var TableCell = function (_Component) {
         className: className,
         onClick: this.handleClick,
         title: title,
-        style: { color: fontColor, backgroundColor: bgColor }
+        style: _extends({ color: fontColor, backgroundColor: bgColor }, column.style)
       },
       indentText,
       expandIcon,

build/TableRow.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -627,7 +629,7 @@ var TableRow = function (_Component) {
         lazyEndIndex: lazyEndIndex
       }));
     }
-    var style = { height: height };
+    var style = _extends({ height: height }, record ? record.style : undefined);
     if (!visible) {
       style.display = 'none';
     }

build/lib/dragColumn.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
@@ -35,115 +35,115 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function dragColumn(Table) {
 
-  return function (_Component) {
+    return function (_Component) {
-    _inherits(DragColumn, _Component);
+        _inherits(DragColumn, _Component);
 
-    function DragColumn(props) {
+        function DragColumn(props) {
-      _classCallCheck(this, DragColumn);
+            _classCallCheck(this, DragColumn);
 
-      var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+            var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-      _this.setColumOrderByIndex = function (_column) {
+            _this.setColumOrderByIndex = function (_column) {
-        _column.forEach(function (da, i) {
+                _column.forEach(function (da, i) {
-          da.dragIndex = i;
+                    da.dragIndex = i;
-          da.drgHover = false;
+                    da.drgHover = false;
-        });
+                });
-        return _column;
+                return _column;
-      };
+            };
 
-      _this.onDragEnd = function (event, data) {
+            _this.onDragEnd = function (event, data) {
-        var dragSource = data.dragSource,
+                var dragSource = data.dragSource,
-            dragTarg = data.dragTarg;
+                    dragTarg = data.dragTarg;
-        var columns = _this.state.columns;
+                var columns = _this.state.columns;
 
-        var sourceIndex = -1,
+                var sourceIndex = -1,
-            targetIndex = -1;
+                    targetIndex = -1;
 
-        sourceIndex = columns.findIndex(function (da, i) {
+                sourceIndex = columns.findIndex(function (da, i) {
-          return da.key == dragSource.key;
+                    return da.key == dragSource.key;
-        });
+                });
-        targetIndex = columns.findIndex(function (da, i) {
+                targetIndex = columns.findIndex(function (da, i) {
-          return da.key == dragTarg.key;
+                    return da.key == dragTarg.key;
-        });
+                });
-        // 向前移动
+                // 向前移动
-        if (targetIndex < sourceIndex) {
+                if (targetIndex < sourceIndex) {
-          targetIndex = targetIndex + 1;
+                    targetIndex = targetIndex + 1;
+                }
+                columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
+                var _newColumns = [];
+                columns.forEach(function (da, i) {
+                    var newDate = _extends(da, {});
+                    newDate.title = da.title;
+                    _newColumns.push(newDate);
+                });
+                _this.setState({
+                    columns: _newColumns //cloneDeep(columns)
+                });
+                if (_this.props.onDragEnd) {
+                    _this.props.onDragEnd(event, data, columns);
+                }
+            };
+
+            _this.getTarget = function (evt) {
+                return evt.target || evt.srcElement;
+            };
+
+            _this.state = {
+                columns: _this.setColumOrderByIndex(props.columns)
+            };
+            return _this;
         }
-        columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
+
-        var _newColumns = [];
+        DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-        columns.forEach(function (da, i) {
+            if (nextProps.columns != this.props.columns) {
-          var newDate = _extends(da, {});
+                this.setState({
-          newDate.title = da.title;
+                    columns: this.setColumOrderByIndex(nextProps.columns)
-          _newColumns.push(newDate);
+                });
+            }
+        };
+
+        DragColumn.prototype.recursion = function (_recursion) {
+            function recursion(_x) {
+                return _recursion.apply(this, arguments);
+            }
+
+            recursion.toString = function () {
+                return _recursion.toString();
+            };
+
+            return recursion;
+        }(function (obj) {
+            var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+            for (key in obj) {
+                if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
+                    data[key] = recursion(obj[key]);
+                } else {
+                    data[key] = obj[key];
+                }
+            }
+            return data;
         });
-        _this.setState({
-          columns: _newColumns //cloneDeep(columns)
-        });
-        if (_this.props.onDragEnd) {
-          _this.props.onDragEnd(event, data, columns);
-        }
-      };
 
-      _this.getTarget = function (evt) {
+        DragColumn.prototype.render = function render() {
-        return evt.target || evt.srcElement;
+            var _props = this.props,
-      };
+                data = _props.data,
+                dragborder = _props.dragborder,
+                draggable = _props.draggable,
+                className = _props.className,
+                others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
 
-      _this.state = {
+            return _react2["default"].createElement(Table, _extends({}, others, {
-        columns: _this.setColumOrderByIndex(props.columns)
+                columns: this.state.columns,
-      };
+                data: data,
-      return _this;
+                className: className + ' u-table-drag-border',
-    }
+                onDragEnd: this.onDragEnd,
+                draggable: draggable,
+                dragborder: dragborder
+            }));
+        };
 
-    DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+        return DragColumn;
-      if (nextProps.columns != this.props.columns) {
+    }(_react.Component);
-        this.setState({
-          columns: this.setColumOrderByIndex(nextProps.columns)
-        });
-      }
-    };
-
-    DragColumn.prototype.recursion = function (_recursion) {
-      function recursion(_x) {
-        return _recursion.apply(this, arguments);
-      }
-
-      recursion.toString = function () {
-        return _recursion.toString();
-      };
-
-      return recursion;
-    }(function (obj) {
-      var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-      for (key in obj) {
-        if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
-          data[key] = recursion(obj[key]);
-        } else {
-          data[key] = obj[key];
-        }
-      }
-      return data;
-    });
-
-    DragColumn.prototype.render = function render() {
-      var _props = this.props,
-          data = _props.data,
-          dragborder = _props.dragborder,
-          draggable = _props.draggable,
-          className = _props.className,
-          others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
-
-      return _react2["default"].createElement(Table, _extends({}, others, {
-        columns: this.state.columns,
-        data: data,
-        className: className + ' u-table-drag-border',
-        onDragEnd: this.onDragEnd,
-        draggable: draggable,
-        dragborder: dragborder
-      }));
-    };
-
-    return DragColumn;
-  }(_react.Component);
 }
 module.exports = exports['default'];

build/lib/util.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
 */
 
 function sortBy(arr, prop, desc) {
-    var props = [],
+  var props = [],
-        ret = [],
+      ret = [],
-        i = 0,
+      i = 0,
-        len = arr.length;
+      len = arr.length;
-    if (typeof prop == 'string') {
+  if (typeof prop == 'string') {
-        for (; i < len; i++) {
+    for (; i < len; i++) {
-            var oI = arr[i];
+      var oI = arr[i];
-            (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+      (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
-        }
-    } else if (typeof prop == 'function') {
-        for (; i < len; i++) {
-            var _oI = arr[i];
-            (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
-        }
-    } else {
-        throw '参数类型错误';
     }
-    props.sort();
+  } else if (typeof prop == 'function') {
-    for (i = 0; i < len; i++) {
+    for (; i < len; i++) {
-        ret[i] = props[i]._obj;
+      var _oI = arr[i];
+      (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
     }
-    if (desc) ret.reverse();
+  } else {
-    return ret;
+    throw '参数类型错误';
+  }
+  props.sort();
+  for (i = 0; i < len; i++) {
+    ret[i] = props[i]._obj;
+  }
+  if (desc) ret.reverse();
+  return ret;
 };
 
 /**
@@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
  * @param {} property 
  */
 function compare(property) {
-    return function (a, b) {
+  return function (a, b) {
-        var value1 = a[property];
+    var value1 = a[property];
-        var value2 = b[property];
+    var value2 = b[property];
-        return value1 - value2;
+    return value1 - value2;
-    };
+  };
 }
 
 /**
@@ -63,17 +63,17 @@ function compare(property) {
  * @param {*} obj 要拷贝的对象 
  */
 function ObjectAssign(obj) {
-    var b = obj instanceof Array;
+  var b = obj instanceof Array;
-    var tagObj = b ? [] : {};
+  var tagObj = b ? [] : {};
-    if (b) {
+  if (b) {
-        //数组
+    //数组
-        obj.forEach(function (da) {
+    obj.forEach(function (da) {
-            var _da = {};
+      var _da = {};
-            _extends(_da, da);
+      _extends(_da, da);
-            tagObj.push(_da);
+      tagObj.push(_da);
-        });
+    });
-    } else {
+  } else {
-        _extends(tagObj, obj);
+    _extends(tagObj, obj);
-    }
+  }
-    return tagObj;
+  return tagObj;
 }

demo/demolist/Demo1602.js

@@ -0,0 +1,37 @@
+/**
+ *
+ * @title 自定义整行和整列样式表格
+ * @parent 基础 Basic
+ * @description 某行或某列的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串。此demo展示自定义整行或整列的背景色和字体内容颜色。
+ * demo0101
+ */
+
+import React, { Component } from "react";
+import Table from "../../src";
+
+const columns = [
+  { title: "员工编号", dataIndex: "a", key: "a", width: 150 },
+  { title: "员工姓名", dataIndex: "b", key: "b", width:100},
+  { title: "性别", dataIndex: "c", key: "c", width: 100,style: {backgroundColor:'blue',color:'#fff'}},
+  { title: "部门", dataIndex: "d", key: "d", width: 100 },
+  { title: "职级", dataIndex: "e", key: "e", width: 100 }
+];
+
+const data = [
+  { a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" ,style:{backgroundColor:'red',color:'blue'}},
+  { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
+  { a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
+];
+
+class Demo1602 extends Component {
+  render() {
+    return (
+      <Table
+        columns={columns}
+        data={data}
+        showRowNum={true}
+      />
+    );
+  }
+}
+export default Demo1602

dist/demo.css

@@ -448,8 +448,8 @@
     background-clip: padding-box;
     -moz-user-select: -moz-none;
     -webkit-user-select: none;
-    /*
+    /*
-        Introduced in IE 10. 
+        Introduced in IE 10. 
       */
     -ms-user-select: none;
     user-select: none; }

docs/api.md

@@ -102,6 +102,11 @@ import 'bee-table/build/Table.css';
 | onDragRowStart | 行拖拽开始时的回调函数 | function(record,index) | `record` : 当前行的数据 <br> `index` : 当前行的index|
 | onDropRow | 行拖拽结束后的回调函数 | function(data,record) | `data` : 拖拽后的新data数组<br> `record` : 拖拽行的数据 |
 
+### Data
+
+|参数|说明|类型|默认值|
+|:--|:---|:--|:---|
+| style | 该行的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串 | object | - |
 
 ### Column
 
@@ -141,6 +146,7 @@ import 'bee-table/build/Table.css';
 | [v2.2.2新增]required | 必填项的列标题展示红色星号 | bool | false |
 | isShow | 是否展示该列数据 | bool | true |
 | cellMenu | 渲染单元格内操作按钮 | object | - |
+| style | 该列的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串 | object | - |
 
 #### [v2.2.x新增] cellMenu
 
@@ -574,4 +580,4 @@ const CheckboxRender = renderCheckbox(Checkbox, Icon);
 
 > 当表格场景比较复杂时，可以使用[复杂表格ComplexGrid](http://bee.tinper.org/bee-complex-grid#bee-complex-grid)。ComplexGrid将常用的过滤、多选、分页、列交换、列拖拽等功能集成在一起。使用起来超级方便。
 
-## 更新日志
+## 更新日志

src/TableCell.js

@@ -59,7 +59,7 @@ class TableCell extends Component{
         cls += 'u-table-link-underline ';
       }
       let title = '';
-      
+
       if(desc === true){
         title = linkUrl;
       }
@@ -184,7 +184,7 @@ class TableCell extends Component{
     let tdProps;
     let colSpan;
     let rowSpan,title;
-    
+
     if (render && !showSum) {
       text = render(text, record, index);
       if (this.isInvalidRenderCellText(text)) {
@@ -274,7 +274,7 @@ class TableCell extends Component{
     if((typeof text == 'string' || typeof text === 'number') && bodyDisplayInRow){
       title = text
     }
-    if(expandIcon && expandIcon.props.expandable){ 
+    if(expandIcon && expandIcon.props.expandable){
       className = className+` ${clsPrefix}-has-expandIcon`
     }
     if(colMenu){
@@ -287,7 +287,7 @@ class TableCell extends Component{
         className={className}
         onClick={this.handleClick}
         title={title}
-        style={{color:fontColor,backgroundColor:bgColor,}}
+        style={{color:fontColor,backgroundColor:bgColor,...column.style}}
       >
         {indentText}
         {expandIcon}

src/TableRow.js

@@ -513,7 +513,7 @@ class TableRow extends Component{
         />
       );
     }
-    const style = { height };
+    const style = { height ,...record?record.style:undefined};
     if (!visible) {
       style.display = 'none';
     }