自定义整行整列样式

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';
     }

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

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
 

src/TableCell.js

@@ -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';
     }