merge

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/Demo0406.js

@@ -0,0 +1,37 @@
+/**
+ *
+ * @title 自定义整行和整列样式表格
+ * @parent 列渲染 Custom Render
+ * @description 某行或某列的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串。此demo展示自定义整行或整列的背景色和字体内容颜色。
+ * demo0406
+ */
+
+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:'#e3f2fd',color:'#505F79'}},
+  { 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:'#ffebee',color:'#000'}},
+  { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
+  { a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
+];
+
+class Demo0406 extends Component {
+  render() {
+    return (
+      <Table
+        columns={columns}
+        data={data}
+        showRowNum={true}
+      />
+    );
+  }
+}
+export default Demo0406

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将常用的过滤、多选、分页、列交换、列拖拽等功能集成在一起。使用起来超级方便。
 
-## 更新日志
+## 更新日志

docs/menu.json

@@ -22,7 +22,8 @@
         "列渲染 Custom Render": {
             "多列表头": "",
             "数据关联": "",
-            "列合计（总计）": ""
+            "列合计（总计）": "",
+            "自定义整行和整列样式表格": ""
         },
         "编辑 Editor": {
             "行内编辑": "",

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