Merge branch 'master' of github.com:tinper-bee/bee-table

2019-04-26 17:55:40 +08:00 · 2019-04-26 17:55:40 +08:00 · 2b0598e6ff
parent 9ee2a98969 06a26d1170
commit 2b0598e6ff
36 changed files with 155399 additions and 141577 deletions
--- a/bee-table.rar
+++ b/bee-table.rar
--- a/build/Table.css
+++ b/build/Table.css
@ -146,7 +146,7 @@
    width: 16px;
    height: 16px;
    text-align: center;
-    line-height: 16px;
+    line-height: 14px;
    border: 1px solid rgb(193, 199, 208);
    user-select: none;
    background: #fff;
@ -162,9 +162,9 @@
  .u-table-row.selected {
    background: #FFF7E7; }
  .u-table tr.u-table-expanded-row {
-    background: #f7f7f7; }
+    background: #DFE1E6; }
    .u-table tr.u-table-expanded-row:hover {
-      background: #f7f7f7; }
+      background: #DFE1E6; }
    .u-table tr.u-table-expanded-row .u-table {
      z-index: 1; }
  .u-table-column-hidden {
--- a/build/lib/sum.js
+++ b/build/lib/sum.js
@ -106,9 +106,9 @@ function sum(Table) {
      return _this;
    }

-    /**
-     * 获取当前的表格类型。
-     * 
+    /**
+     * 获取当前的表格类型。
+     * 
     */


--- a/build/lib/util.js
+++ b/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; };
@ -9,71 +9,71 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 exports.sortBy = sortBy;
 exports.compare = compare;
 exports.ObjectAssign = ObjectAssign;
-/*
-* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
-* @method soryBy
-* @static
-* @param {array} arr 待处理数组
-* @param {string|function} prop 排序依据属性，获取
-* @param {boolean} desc 降序
-* @return {array} 返回排序后的新数组
+/*
+* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
+* @method soryBy
+* @static
+* @param {array} arr 待处理数组
+* @param {string|function} prop 排序依据属性，获取
+* @param {boolean} desc 降序
+* @return {array} 返回排序后的新数组
 */

 function sortBy(arr, prop, desc) {
-    var props = [],
-        ret = [],
-        i = 0,
-        len = arr.length;
-    if (typeof prop == 'string') {
-        for (; i < len; i++) {
-            var oI = arr[i];
-            (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 '参数类型错误';
+  var props = [],
+      ret = [],
+      i = 0,
+      len = arr.length;
+  if (typeof prop == 'string') {
+    for (; i < len; i++) {
+      var oI = arr[i];
+      (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
    }
-    props.sort();
-    for (i = 0; i < len; i++) {
-        ret[i] = props[i]._obj;
+  } else if (typeof prop == 'function') {
+    for (; i < len; i++) {
+      var _oI = arr[i];
+      (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
    }
-    if (desc) ret.reverse();
-    return ret;
+  } else {
+    throw '参数类型错误';
+  }
+  props.sort();
+  for (i = 0; i < len; i++) {
+    ret[i] = props[i]._obj;
+  }
+  if (desc) ret.reverse();
+  return ret;
 };

-/**
- * 数组对象排序
- * console.log(arr.sort(compare('age')))
- * @param {} property 
+/**
+ * 数组对象排序
+ * console.log(arr.sort(compare('age')))
+ * @param {} property 
 */
 function compare(property) {
-    return function (a, b) {
-        var value1 = a[property];
-        var value2 = b[property];
-        return value1 - value2;
-    };
+  return function (a, b) {
+    var value1 = a[property];
+    var value2 = b[property];
+    return value1 - value2;
+  };
 }

-/**
- * 简单数组数据对象拷贝
- * @param {*} obj 要拷贝的对象 
+/**
+ * 简单数组数据对象拷贝
+ * @param {*} obj 要拷贝的对象 
 */
 function ObjectAssign(obj) {
-    var b = obj instanceof Array;
-    var tagObj = b ? [] : {};
-    if (b) {
-        //数组
-        obj.forEach(function (da) {
-            var _da = {};
-            _extends(_da, da);
-            tagObj.push(_da);
-        });
-    } else {
-        _extends(tagObj, obj);
-    }
-    return tagObj;
+  var b = obj instanceof Array;
+  var tagObj = b ? [] : {};
+  if (b) {
+    //数组
+    obj.forEach(function (da) {
+      var _da = {};
+      _extends(_da, da);
+      tagObj.push(_da);
+    });
+  } else {
+    _extends(tagObj, obj);
+  }
+  return tagObj;
 }
--- a/build/render/CheckboxRender.js
+++ b/build/render/CheckboxRender.js
@ -19,11 +19,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

-/**
- * 渲染checkbox
- * @param Checkbox
- * @param Icon
- * @returns {CheckboxRender}
+/**
+ * 渲染checkbox
+ * @param Checkbox
+ * @param Icon
+ * @returns {CheckboxRender}
 */
 function renderCheckbox(Checkbox, Icon) {
    return function (_Component) {
--- a/build/render/InputRender.js
+++ b/build/render/InputRender.js
@ -28,12 +28,12 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

-/**
- * 渲染输入框
- * @param Form
- * @param Input
- * @param Icon
- * @returns {InputRender}
+/**
+ * 渲染输入框
+ * @param Form
+ * @param Input
+ * @param Icon
+ * @returns {InputRender}
 */
 function renderInput(Form, Input, Icon) {
    var _class, _temp2;
--- a/build/render/SelectRender.js
+++ b/build/render/SelectRender.js
@ -26,11 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

-/**
- * 渲染下拉框
- * @param Select
- * @param Icon
- * @returns {SelectRender}
+/**
+ * 渲染下拉框
+ * @param Select
+ * @param Icon
+ * @returns {SelectRender}
 */
 function renderSelect(Select, Icon) {
    var _class, _temp2;
--- a/demo/TableDemo.scss
+++ b/demo/TableDemo.scss
@ -33,9 +33,12 @@

 }
 .opt-btns .u-button{
+  margin: 0 4px;
  color: #fff;
  background: #505F79;
+  border-color: #505F79;
  &:hover, &:active{
    background: #344563;
+    border-color: #505F79;
  }
 }
--- a/demo/demolist/Demo0101.js
+++ b/demo/demolist/Demo0101.js
@ -11,49 +11,20 @@ import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";

 const columns = [
-  {
-    title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
-    fixed:'left',
-    render: (text, record, index) => {
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "block",
-            width: "80px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "bottom",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
-  { title: "员工姓名", dataIndex: "b", key: "b", width:100 },
-  { title: "性别", dataIndex: "c", key: "c", width: 100 },
+  { title: "员工编号", dataIndex: "a", key: "a", width: 150 },
+  { title: "员工姓名", dataIndex: "b", key: "b", width:100},
+  { title: "性别", dataIndex: "c", key: "c", width: 100},
  { title: "部门", dataIndex: "d", key: "d", width: 100 },
  { title: "职级", dataIndex: "e", key: "e", width: 100 }
 ];

 const data = [
-  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
-  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
-  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
+  { a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
+  { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
+  { a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
 ];

-class Demo01 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data
-    }
-  }
-  handleClick = () => {
-    console.log('这是第' , this.currentIndex , '行');
-    console.log('内容：' , this.currentRecord);
-  }
-
+class Demo0101 extends Component {
  render() {
    return (
        <Table
@ -64,4 +35,4 @@ class Demo01 extends Component {
  }
 }

-export default Demo01;
+export default Demo0101;
--- a/demo/demolist/Demo0102.js
+++ b/demo/demolist/Demo0102.js
@ -9,9 +9,8 @@

 import React, { Component } from 'react';
 import Table from '../../src';
-import Icon from 'bee-icon';

-const columns02 = [
+const columns = [
    {
      title: "员工编号",
      dataIndex: "num",
@ -31,7 +30,7 @@ const columns02 = [
    }
 ];
  
-const data02 = [];
+const data = [];

 // 在此自定义无数据时的展示内容
 const emptyFunc = () => 'No Data';
@ -40,8 +39,8 @@ class Demo02 extends Component {
  render() {
    return (
      <Table 
-      columns={columns02} 
-      data={data02} 
+      columns={columns} 
+      data={data} 
      // emptyText={emptyFunc} 
      />
    )
--- a/demo/demolist/Demo0103.js
+++ b/demo/demolist/Demo0103.js
@ -2,7 +2,7 @@
 *
 * @title 固定表头
 * @parent 基础 Basic
-* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
+* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。
 * demo0103
 */

@ -54,24 +54,6 @@ const columns03 = [
      dataIndex: "voucherDate",
      key: "voucherDate",
      width: 200,
-  },
-  {
-      title: "审批状态",
-      dataIndex: "approvalState_name",
-      key: "approvalState_name",
-      width: 200
-  },
-  {
-      title: "确认状态",
-      dataIndex: "confirmState_name",
-      key: "confirmState_name",
-       width: 200
-  }, 
-  {
-      title: "关闭状态",
-      dataIndex: "closeState_name",
-      key: "closeState_name",
-      width: 100
  }
 ];

@ -83,9 +65,6 @@ const data03 = [
    purchasing:'组织c', 
    purchasingGroup:"aa",
    voucherDate:"2018年03月18日",
-    approvalState_name:"已审批",
-    confirmState_name:"执行中",
-    closeState_name:"未关闭",
    key: "1"
  }, 
  { 
@ -95,9 +74,6 @@ const data03 = [
    purchasing:'组织a', 
    purchasingGroup:"bb",
    voucherDate:"2018年02月05日",
-    approvalState_name:"已审批",
-    confirmState_name:"待确认",
-    closeState_name:"未关闭",
    key: "2"
  },
  { 
@ -107,9 +83,6 @@ const data03 = [
    purchasing:'组织b', 
    purchasingGroup:"aa",
    voucherDate:"2018年07月01日",
-    approvalState_name:"已审批",
-    confirmState_name:"终止",
-    closeState_name:"已关闭",
    key: "3"
  },
  { 
@ -119,9 +92,6 @@ const data03 = [
    purchasing:'组织c', 
    purchasingGroup:"cc",
    voucherDate:"2019年03月01日",
-    approvalState_name:"未审批",
-    confirmState_name:"待确认",
-    closeState_name:"未关闭",
    key: "4"
  },
  { 
@ -131,9 +101,6 @@ const data03 = [
    purchasing:'组织d', 
    purchasingGroup:"ss",
    voucherDate:"2019年02月14日",
-    approvalState_name:"未审批",
-    confirmState_name:"待确认",
-    closeState_name:"未关闭",
    key: "5"
  },
  { 
@ -143,9 +110,6 @@ const data03 = [
    purchasing:'组织e', 
    purchasingGroup:"zz",
    voucherDate:"2019年02月18日",
-    approvalState_name:"已审批",
-    confirmState_name:"终止",
-    closeState_name:"已关闭",
    key: "6"
  },
  { 
@ -155,9 +119,6 @@ const data03 = [
    purchasing:'组织f', 
    purchasingGroup:"qq",
    voucherDate:"2019年01月01日",
-    approvalState_name:"已审批",
-    confirmState_name:"执行中",
-    closeState_name:"未关闭",
    key: "7"
  },
  { 
@ -167,9 +128,6 @@ const data03 = [
    purchasing:'组织g', 
    purchasingGroup:"pp",
    voucherDate:"2019年01月31日",
-    approvalState_name:"未审批",
-    confirmState_name:"待确认",
-    closeState_name:"未关闭",
    key: "8"
  },
 ];
--- a/demo/demolist/Demo0107.js
+++ b/demo/demolist/Demo0107.js
@ -0,0 +1,39 @@
+/**
+*
+* @title 带边框
+* @parent 基础 Basic
+* @description 设置 `bordered` 属性可添加表格边框线。
+* demo0107
+*/
+
+import React, { Component } from "react";
+import {Button,Tooltip} from "tinper-bee";
+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},
+  { 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" },
+  { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
+  { a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
+];
+
+class Demo06 extends Component {
+  render() {
+    return (
+        <Table
+          columns={columns}
+          data={data}
+          bordered
+        />
+    );
+  }
+}
+
+export default Demo06;
--- a/demo/demolist/Demo0404.js
+++ b/demo/demolist/Demo0404.js
@ -77,7 +77,7 @@ class Demo33 extends Component {
                            overlay={menu1}
                            animation="slide-up"
                        >
-                            <Icon type="uf-link" style={{color:'rgb(0, 72, 152)'}}></Icon>
+                            <Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
                        </Dropdown>
                    )
                }
--- a/demo/demolist/Demo0501.js
+++ b/demo/demolist/Demo0501.js
@ -0,0 +1,511 @@
+/**
+ *
+ * @title 行编辑 - 行内编辑
+ * @parent 编辑 Editor
+ * @description 可以对行进行编辑的表格
+ * demo0501
+ */
+import React, { Component, PureComponent } from "react";
+import Table from "../../src";
+import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
+const Option = Select.Option;
+import { RefTreeWithInput } from "ref-tree";
+
+function handleFormValueChange(WarpCompProps, field, allFields) {
+  const { onChange, throwError } = WarpCompProps;
+  if (field.value === "") return throwError && throwError(true);
+  throwError && throwError(false);
+  onChange && onChange(field.value);
+}
+
+const StringEditCell = Form.createForm({
+  onValuesChange: handleFormValueChange
+})(PureStringEditCell);
+
+function PureStringEditCell(props) {
+  const { getFieldProps, getFieldError } = props.form;
+  const { value, editable, required } = props;
+  let cls = "editable-cell-input-wrapper";
+  if (required) cls += " required";
+  if (getFieldError("value")) cls += " verify-cell";
+  return editable ? (
+    <div className="editable-cell">
+      <div className={cls}>
+        <FormControl
+          {...getFieldProps("value", {
+            initialValue: value,
+            validateTrigger: "onBlur",
+            rules: [
+              {
+                required: true,
+                message: (
+                  <Tooltip
+                    inverse
+                    className="u-editable-table-tp"
+                    placement="bottom"
+                    overlay={
+                      <div className="tp-content">
+                        {"请输入" + props.colName}
+                      </div>
+                    }
+                  >
+                    <Icon className="uf-exc-t required-icon" />
+                  </Tooltip>
+                )
+              }
+            ]
+          })}
+        />
+        <span className="error">{getFieldError("value")}</span>
+      </div>
+    </div>
+  ) : (
+    value || " "
+  );
+}
+
+const SELECT_SOURCE = ["男", "女"];
+
+class SelectEditCell extends PureComponent {
+  constructor(props, context) {
+    super(props);
+  }
+
+  handleSelect = value => {
+    this.props.onChange && this.props.onChange(value);
+  };
+
+  render() {
+    const { value, editable } = this.props;
+    return editable ? (
+      <div className="editable-cell">
+        <div className="editable-cell-input-wrapper">
+          <Select value={this.props.value} onSelect={this.handleSelect}>
+            {SELECT_SOURCE.map((item, index) => (
+              <Option key={index} value={item}>
+                {item}
+              </Option>
+            ))}
+          </Select>
+        </div>
+      </div>
+    ) : (
+      value || " "
+    );
+  }
+}
+
+const option = {
+  title: "树",
+  searchable: true,
+  multiple: false,
+  param: {
+    refCode: "neworganizition_tree"
+  },
+  checkStrictly: true,
+  disabled: false,
+  nodeDisplay: record => {
+    return record.refname;
+  },
+  displayField: record => {
+    return record.refname;
+  }, //显示内容的键
+  valueField: "refpk", //真实 value 的键
+  refModelUrl: {
+    treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
+    treeUrl: "/pap_basedoc/common-ref/blobRefTree"
+  },
+  matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
+  filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
+  lazyModal: false,
+  strictMode: true,
+  lang: "zh_CN",
+  treeData: [
+    {
+      code: "org1",
+      children: [
+        {
+          code: "bj",
+          entityType: "mainEntity",
+          name: "北京总部-简",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "bj",
+          refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
+          id: "5305416e-e7b4-4051-90bd-12d12942295b",
+          isLeaf: "true",
+          refname: "北京总部-简"
+        },
+        {
+          code: "xd",
+          entityType: "mainEntity",
+          name: "新道-简",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "xd",
+          refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
+          id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
+          isLeaf: "true",
+          refname: "新道-简"
+        },
+        {
+          code: "yy3",
+          entityType: "mainEntity",
+          name: "test3",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "yy3",
+          refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
+          id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
+          isLeaf: "true",
+          refname: "test3"
+        },
+        {
+          code: "yy1",
+          entityType: "mainEntity",
+          name: "test1",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "yy1",
+          refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
+          id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
+          isLeaf: "true",
+          refname: "test1"
+        },
+        {
+          code: "dept2",
+          children: [
+            {
+              code: "cs",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "测试部-简",
+              pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+              refcode: "cs",
+              refpk: "cc43a66a-438d-4106-937f-bec44406f771",
+              id: "cc43a66a-438d-4106-937f-bec44406f771",
+              isLeaf: "true",
+              refname: "测试部-简"
+            },
+            {
+              code: "qd",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "前端部-简",
+              pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+              refcode: "qd",
+              refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
+              id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
+              isLeaf: "true",
+              refname: "前端部-简"
+            }
+          ],
+          entityType: "subEntity",
+          organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          name: "生产处",
+          refcode: "dept2",
+          refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+          id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+          refname: "生产处"
+        },
+        {
+          code: "dept1",
+          children: [
+            {
+              code: "dept1_2",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "财务二科",
+              pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+              refcode: "dept1_2",
+              refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+              id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+              isLeaf: "true",
+              refname: "财务二科"
+            },
+            {
+              code: "dept1_1",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "财务一科",
+              pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+              refcode: "dept1_1",
+              refpk: "9711d912-3184-4063-90c5-1facc727813c",
+              id: "9711d912-3184-4063-90c5-1facc727813c",
+              isLeaf: "true",
+              refname: "财务一科"
+            }
+          ],
+          entityType: "subEntity",
+          organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          name: "财务处",
+          refcode: "dept1",
+          refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+          id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+          refname: "财务处"
+        }
+      ],
+      entityType: "mainEntity",
+      name: "用友集团",
+      refcode: "org1",
+      refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      refname: "用友集团"
+    }
+  ]
+};
+
+const RefEditCell = Form.createForm()(
+  class RefComponentWarpper extends PureComponent {
+    constructor(props, context) {
+      super(props);
+    }
+
+    handleSelect = values => {
+      this.props.onChange && this.props.onChange(values[0]);
+    };
+
+    render() {
+      const { getFieldProps, getFieldError } = this.props.form;
+      const { value, editable, required } = this.props;
+      let cls = "editable-cell-input-wrapper";
+      if (required) cls += " required";
+      if (getFieldError("refValue")) cls += " verify-cell";
+      return editable ? (
+        <div className={cls}>
+          <RefTreeWithInput
+            {...option}
+            onSave={this.handleSelect}
+            getRefTreeData={this.getRefTreeData}
+            {...getFieldProps("refValue", {
+              initialValue: JSON.stringify(value),
+              rules: [
+                {
+                  message: (
+                    <Tooltip
+                      inverse
+                      className="u-editable-table-tp"
+                      placement="bottom"
+                      overlay={
+                        <div className="tp-content">
+                          {"请输入" + this.props.colName}
+                        </div>
+                      }
+                    >
+                      <Icon className="uf-exc-t required-icon" />
+                    </Tooltip>
+                  ),
+                  pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
+                }
+              ]
+            })}
+          />
+          <span className="error">{getFieldError("refValue")}</span>
+        </div>
+      ) : (
+        value.name || " "
+      );
+    }
+  }
+);
+
+let dataSource = [
+  {
+    a: "ASVAL_201903280005",
+    b: "小张",
+    c: "男",
+    d: {
+      code: "dept1_2",
+      entityType: "subEntity",
+      organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      name: "财务二科",
+      pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+      refcode: "dept1_2",
+      refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      isLeaf: "true",
+      refname: "财务二科"
+    },
+    key: "1"
+  },
+  {
+    a: "ASVAL_201903200004",
+    b: "小明",
+    c: "男",
+    d: {
+      code: "dept1_2",
+      entityType: "subEntity",
+      organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      name: "财务二科",
+      pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+      refcode: "dept1_2",
+      refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      isLeaf: "true",
+      refname: "财务二科"
+    },
+    key: "2"
+  },
+  {
+    a: "ASVAL_201903120002",
+    b: "小红",
+    c: "女",
+    d: {
+      code: "dept1_1",
+      entityType: "subEntity",
+      organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      name: "财务一科",
+      pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+      refcode: "dept1_1",
+      refpk: "9711d912-3184-4063-90c5-1facc727813c",
+      id: "9711d912-3184-4063-90c5-1facc727813c",
+      isLeaf: "true",
+      refname: "财务一科"
+    },
+    key: "3"
+  }
+];
+
+class Demo0501 extends Component {
+  constructor(props, context) {
+    super(props);
+    this.columns = [
+      {
+        title: "员工编号",
+        dataIndex: "a",
+        key: "a"
+      },
+      {
+        title: "名字",
+        dataIndex: "b",
+        key: "b",
+        render: (text, record, index) => (
+          <StringEditCell
+            colName={"名字"}
+            editable={this.state.editingRowsMap[index] || false}
+            required
+            value={text}
+            onChange={this.onCellChange(index, "b")}
+            throwError={this.throwError}
+          />
+        )
+      },
+      {
+        title: "性别",
+        dataIndex: "c",
+        key: "c",
+        width: 100,
+        render: (text, record, index) => (
+          <SelectEditCell
+            editable={this.state.editingRowsMap[index] || false}
+            value={text}
+            onChange={this.onCellChange(index, "c")}
+          />
+        )
+      },
+      {
+        title: "部门",
+        dataIndex: "d",
+        key: "d",
+        width: 215,
+        render: (text, record, index) => (
+          <RefEditCell
+            colName={"部门"}
+            editable={this.state.editingRowsMap[index] || false}
+            required
+            value={record.d}
+            onChange={this.onCellChange(index, "d")}
+            throwError={this.throwError}
+          />
+        )
+      },
+      // 只是用来占位占宽度的
+      {
+        key: "placeholder"
+      }
+    ];
+
+    this.state = {
+      dataSource: dataSource,
+      editingRowsMap: {},
+      currentIndex: null,
+      errorEditFlag: false
+    };
+
+    this.originData = {};
+  }
+
+  edit = index => () => {
+    if (index === null) return;
+    let editingRowsMap = { ...this.state.editingRowsMap };
+    editingRowsMap[index] = index.toString();
+    this.originData[index] = { ...this.state.dataSource[index] };
+    this.setState({ editingRowsMap });
+  };
+
+  abortEdit = index => () => {
+    let editingRowsMap = { ...this.state.editingRowsMap };
+    let dataSource = [...this.state.dataSource];
+    dataSource[index] = this.originData[index];
+    delete editingRowsMap[index];
+    delete this.originData[index];
+    this.setState({ editingRowsMap, dataSource });
+  };
+
+  commitChange = index => () => {
+    if (this.state.errorEditFlag) return;
+    let editingRowsMap = { ...this.state.editingRowsMap };
+    delete editingRowsMap[index];
+    this.setState({ editingRowsMap });
+  };
+
+  onCellChange = (index, key) => value => {
+    let dataSource = [...this.state.dataSource];
+    dataSource[index][key] = value;
+    this.setState({ dataSource });
+  };
+
+  throwError = isError => {
+    if (isError !== this.state.errorEditFlag)
+      this.setState({ errorEditFlag: isError });
+  };
+
+  handleRowHover = (index, record) => {
+    this.currentRecord = record;
+    this.setState({ currentIndex: index });
+  };
+
+  renderRowHover = () => {
+    const { currentIndex } = this.state;
+    return this.state.editingRowsMap[currentIndex] ? (
+      <div className={"opt-btns"}>
+        <Button colors="dark" onClick={this.abortEdit(currentIndex)}>
+          取消
+        </Button>
+        <Button colors="primary" onClick={this.commitChange(currentIndex)}>
+          确认
+        </Button>
+      </div>
+    ) : (
+      <div className={"opt-btns"}>
+        <Button colors="dark" onClick={this.edit(currentIndex)}>
+          编辑
+        </Button>
+      </div>
+    );
+  };
+
+  render() {
+    const { dataSource } = this.state;
+    const columns = this.columns;
+    return (
+      <div className="demo0501 u-editable-table">
+        <Table
+          data={dataSource}
+          columns={columns}
+          height={40}
+          onRowHover={this.handleRowHover}
+          hoverContent={this.renderRowHover}
+        />
+      </div>
+    );
+  }
+}
+
+export default Demo0501;
--- a/demo/demolist/Demo0501.scss
+++ b/demo/demolist/Demo0501.scss
@ -0,0 +1,74 @@
+.demo0501 .u-table {
+  .u-row-hover {
+    .opt-btns {
+      button {
+        border-radius: 5px;
+
+        &:first-child {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  .u-table-row {
+    td {
+      padding: 5px 8px;
+
+      input {
+        font-size: 12px;
+        padding-left: 5px;
+      }
+    }
+
+    .u-form-control,
+    .u-select-selection {
+      height: 30px;
+    }
+  }
+
+  .editable-cell-text-wrapper {
+    box-sizing: border-box;
+    line-height: 20px;
+    border-radius: 3px;
+  }
+
+  .required {
+    margin-left: 10px;
+    position: relative;
+
+    &::before {
+      content: " ";
+      border: 2px solid #F44336;
+      width: 0;
+      height: 12px;
+      position: absolute;
+      top: 9px;
+      left: -8px;
+    }
+
+    span.u-input-group {
+      display: block
+    }
+  }
+  .verify-cell {
+    padding-right: 25px !important;
+  }
+
+  .required-icon {
+    position: absolute;
+    top: 2px;
+    color: #F44336;
+    font-size: 20px;
+  }
+
+  .ref-input-wrap {
+    width: 160px !important;
+  }
+}
+
+.u-editable-table-tp {
+  .tp-content {
+    color: #F44336;
+  }
+}
--- a/demo/demolist/Demo0502.js
+++ b/demo/demolist/Demo0502.js
@ -18,6 +18,7 @@ class StringEditCell extends Component {
      value: this.props.value,
      editable: false
    };
+    this.editWarp = React.createRef();
  }

  commitChange = () => {
@ -39,6 +40,7 @@ class StringEditCell extends Component {
  };

  handleChange = e => {
+    if (e.target.value === "") this.editWarp.className += " verify-cell";
    this.setState({ value: e.target.value });
  };

@ -47,7 +49,7 @@ class StringEditCell extends Component {
    return (
      <div className="editable-cell">
        {editable ? (
-          <div className="editable-cell-input-wrapper">
+          <div ref={el => this.editWarp = el} className="editable-cell-input-wrapper">
            <input
              className={value ? "u-form-control" : "u-form-control error"}
              autoFocus
@ -60,10 +62,10 @@ class StringEditCell extends Component {
            {value === "" ? (
              <Tooltip
                inverse
-                className="tp-0502"
+                className="u-editable-table-tp"
                placement="bottom"
                overlay={
-                  <div className="help-tip">
+                  <div className="tp-content">
                    {"请输入" + this.props.colName}
                  </div>
                }
@ -490,7 +492,7 @@ class Demo0502 extends Component {

  render() {
    return (
-      <div className="demo0502">
+      <div className="demo0502 u-editable-table">
        <Table data={this.state.dataSource} columns={this.columns} />
      </div>
    );
--- a/demo/demolist/Demo0502.scss
+++ b/demo/demolist/Demo0502.scss
@ -1,21 +1,28 @@
-.demo0502 {
+.u-editable-table .u-table {
  .u-table-row {
    td {
      padding: 5px 8px;

-      input.error {
-        border-color: #F44336;
+      input {
+        padding-left: 5px;
+        font-size: 12px;
+
+        &.error {
+          border-color: #F44336;
+        }
      }
    }
+
    .editable-cell {
      height: 30px;
    }
+
    &-hover {
      .editable-cell-text-wrapper {
-        line-height: 18px;
-        border: 1px solid #c1c7d0;
+        line-height: 19px;
      }
    }
+
    .u-form-control,
    .u-select-selection {
      height: 30px;
@ -26,11 +33,14 @@
    box-sizing: border-box;
    line-height: 20px;
    border-radius: 3px;
+  }

-    &:hover {
-      line-height: 18px;
-      border: 1px solid #a5adba;
-    }
+  .editable-cell-input-wrapper {
+    padding-right: 0;
+  }
+
+  .verify-cell {
+    padding-right: 25px !important;
  }

  .require {
@ -41,16 +51,8 @@
  }
 }

-.help-tip {
-  color: #F44336;
-}
-
-.tp-0502 {
-  .tooltip-arrow {
-    border-bottom-color: #F44336 !important;
+.u-editable-table-tp {
+  .tp-content {
+    color: #F44336;
  }
-
-  .tooltip-inner {
-    border-color: #F44336 !important;
-  }
-}
+}
--- a/demo/demolist/Demo0503.js
+++ b/demo/demolist/Demo0503.js
@ -0,0 +1,575 @@
+/**
+ *
+ * @title 行编辑 - 弹框编辑
+ * @parent 编辑 Editor
+ * @description 以弹框形式以对行进行编辑的表格
+ * demo0503
+ */
+
+import React, { Component, PureComponent } from "react";
+import Table from "../../src";
+import {
+  Select, Form, FormControl, Button, Icon,
+  Tooltip, Modal, FormGroup, Label, Row, Col
+} from "tinper-bee";
+const Option = Select.Option;
+import { RefTreeWithInput } from "ref-tree";
+
+function handleFormValueChange(WarpCompProps, field, allFields) {
+  const { onChange, throwError } = WarpCompProps;
+  if (field.value === "") return throwError && throwError(true);
+  throwError && throwError(false);
+  onChange && onChange(field.value);
+}
+
+const StringEditCell = Form.createForm({
+  onValuesChange: handleFormValueChange
+})(PureStringEditCell);
+
+function PureStringEditCell(props) {
+  const { getFieldProps, getFieldError } = props.form;
+  const { value, required } = props;
+  let cls = "editable-cell";
+  if (required) cls += " required";
+  return (
+    <div className={cls}>
+      <FormControl
+        {...getFieldProps("value", {
+          initialValue: value,
+          validateTrigger: "onBlur",
+          rules: [
+            {
+              required: true,
+              message: (
+                <Tooltip
+                  inverse
+                  className="u-editable-table-tp"
+                  placement="bottom"
+                  overlay={
+                    <div className="tp-content">
+                      {"请输入" + props.colName}
+                    </div>
+                  }
+                >
+                  <Icon className="uf-exc-t required-icon" />
+                </Tooltip>
+              )
+            }
+          ]
+        })}
+      />
+      <span className="error">{getFieldError("value")}</span>
+    </div>
+  );
+}
+
+const SELECT_SOURCE = ["男", "女"];
+
+class SelectEditCell extends PureComponent {
+  constructor(props, context) {
+    super(props);
+  }
+
+  handleSelect = value => {
+    this.props.onChange && this.props.onChange(value);
+  };
+
+  render() {
+    return (
+      <div className="editable-cell">
+          <Select value={this.props.value} onSelect={this.handleSelect}>
+            {SELECT_SOURCE.map((item, index) => (
+              <Option key={index} value={item}>
+                {item}
+              </Option>
+            ))}
+          </Select>
+      </div>
+    );
+  }
+}
+
+const option = {
+  title: "树",
+  searchable: true,
+  multiple: false,
+  param: {
+    refCode: "neworganizition_tree"
+  },
+  checkStrictly: true,
+  disabled: false,
+  nodeDisplay: record => {
+    return record.refname;
+  },
+  displayField: record => {
+    return record.refname;
+  }, //显示内容的键
+  valueField: "refpk", //真实 value 的键
+  refModelUrl: {
+    treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
+    treeUrl: "/pap_basedoc/common-ref/blobRefTree"
+  },
+  matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
+  filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
+  lazyModal: false,
+  strictMode: true,
+  lang: "zh_CN",
+  treeData: [
+    {
+      code: "org1",
+      children: [
+        {
+          code: "bj",
+          entityType: "mainEntity",
+          name: "北京总部-简",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "bj",
+          refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
+          id: "5305416e-e7b4-4051-90bd-12d12942295b",
+          isLeaf: "true",
+          refname: "北京总部-简"
+        },
+        {
+          code: "xd",
+          entityType: "mainEntity",
+          name: "新道-简",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "xd",
+          refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
+          id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
+          isLeaf: "true",
+          refname: "新道-简"
+        },
+        {
+          code: "yy3",
+          entityType: "mainEntity",
+          name: "test3",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "yy3",
+          refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
+          id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
+          isLeaf: "true",
+          refname: "test3"
+        },
+        {
+          code: "yy1",
+          entityType: "mainEntity",
+          name: "test1",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "yy1",
+          refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
+          id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
+          isLeaf: "true",
+          refname: "test1"
+        },
+        {
+          code: "dept2",
+          children: [
+            {
+              code: "cs",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "测试部-简",
+              pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+              refcode: "cs",
+              refpk: "cc43a66a-438d-4106-937f-bec44406f771",
+              id: "cc43a66a-438d-4106-937f-bec44406f771",
+              isLeaf: "true",
+              refname: "测试部-简"
+            },
+            {
+              code: "qd",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "前端部-简",
+              pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+              refcode: "qd",
+              refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
+              id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
+              isLeaf: "true",
+              refname: "前端部-简"
+            }
+          ],
+          entityType: "subEntity",
+          organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          name: "生产处",
+          refcode: "dept2",
+          refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+          id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+          refname: "生产处"
+        },
+        {
+          code: "dept1",
+          children: [
+            {
+              code: "dept1_2",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "财务二科",
+              pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+              refcode: "dept1_2",
+              refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+              id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+              isLeaf: "true",
+              refname: "财务二科"
+            },
+            {
+              code: "dept1_1",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "财务一科",
+              pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+              refcode: "dept1_1",
+              refpk: "9711d912-3184-4063-90c5-1facc727813c",
+              id: "9711d912-3184-4063-90c5-1facc727813c",
+              isLeaf: "true",
+              refname: "财务一科"
+            }
+          ],
+          entityType: "subEntity",
+          organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          name: "财务处",
+          refcode: "dept1",
+          refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+          id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+          refname: "财务处"
+        }
+      ],
+      entityType: "mainEntity",
+      name: "用友集团",
+      refcode: "org1",
+      refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      refname: "用友集团"
+    }
+  ]
+};
+
+const RefEditCell = Form.createForm()(
+  class RefComponentWarpper extends PureComponent {
+    constructor(props, context) {
+      super(props);
+    }
+
+    handleSelect = values => {
+      const { form, throwError, onChange } = this.props
+      if (form.getFieldError("refValue")) return throwError && throwError(true);
+      throwError && throwError(false);
+      onChange && onChange(values[0]);
+    };
+
+    render() {
+      const { getFieldProps, getFieldError } = this.props.form;
+      const { value, required } = this.props;
+      let cls = "editable-cell";
+      if (required) cls += " required";
+      return (
+        <div className={cls}>
+          <RefTreeWithInput
+            {...option}
+            onSave={this.handleSelect}
+            getRefTreeData={this.getRefTreeData}
+            {...getFieldProps("refValue", {
+              initialValue: JSON.stringify(value),
+              rules: [
+                {
+                  message: (
+                    <Tooltip
+                      inverse
+                      className="u-editable-table-tp"
+                      placement="bottom"
+                      overlay={
+                        <div className="tp-content">
+                          {"请输入" + this.props.colName}
+                        </div>
+                      }
+                    >
+                      <Icon className="uf-exc-t required-icon" />
+                    </Tooltip>
+                  ),
+                  pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
+                }
+              ]
+            })}
+          />
+          <span className="error">{getFieldError("refValue")}</span>
+        </div>
+      );
+    }
+  }
+);
+
+class EditModal extends Component {
+  constructor(props, context) {
+    super(props);
+    this.state = {
+      data: this.props.data,
+      errorEditFlag: false
+    };
+
+    // 属性名对应 columns 属性中的 key 值
+    this.renderElm = {
+      b: (record, index) => (
+        <StringEditCell
+          colName={"名字"}
+          required={true}
+          value={record.b}
+          onChange={this.onFieldChange("b")}
+          throwError={this.throwError}
+        />
+      ),
+
+      c: (record, index) => (
+        <SelectEditCell
+          value={record.c}
+          onChange={this.onFieldChange("c")}
+        />
+      ),
+      d: (record, index) => (
+        <RefEditCell
+          colName={"部门"}
+          required={true}
+          value={record.d}
+          onChange={this.onFieldChange("d")}
+          throwError={this.throwError}
+        />
+      )
+    }
+  }
+
+  onFieldChange = field => value => {
+    let data = { ...this.state.data };
+    data[field] = value;
+    this.setState({ data });
+  }
+
+  submitChange = () => {
+    if (this.state.errorEditFlag) return;
+    const { onSubmit, onHide, currentIndex } = this.props;
+    onSubmit && onSubmit(this.state.data, currentIndex);
+    onHide && onHide();
+  }
+
+  throwError = isError => {
+    if (isError !== this.state.errorEditFlag)
+      this.setState({ errorEditFlag: isError });
+  };
+
+  render() {
+    const { show, onHide, columns, currentIndex } = this.props;
+    const { data } = this.state;
+    return (
+      <Modal
+        show={show}
+        onHide={onHide}
+        style={{ width: 700 }}
+        className="demo0503-m-b"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>编辑行</Modal.Title>
+        </Modal.Header>
+        <Modal.Body >
+          <Row style={{ width: 660, margin: "0 auto" }}>
+            {
+              columns.map((item, index) => {
+                return (
+                  <Col sm={6} md={6} lg={6} style={{ padding: 0 }} key={index}>
+                    <FormGroup>
+                      <Label>{item.title}</Label>
+                      {this.renderElm[item.key] &&
+                        this.renderElm[item.key](
+                          data,
+                          currentIndex
+                        )}
+                      {!this.renderElm[item.key] && (
+                        <div className="editable-cell">
+                          <FormControl
+                            defaultValue={data[item.dataIndex]}
+                            disabled={true}
+                          />
+                        </div>
+                      )}
+                    </FormGroup>
+                  </Col>
+                );
+              })
+            }
+          </Row>
+        </Modal.Body>
+        <Modal.Footer style={{textAlign: "center"}}>
+          <Button
+            colors="secondary"
+            style={{ marginRight: 15 }}
+            onClick={onHide}
+          >
+            取消
+          </Button>
+          <Button colors="primary" onClick={this.submitChange}>
+            确认
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+let dataSource = [
+  {
+    a: "ASVAL_201903280005",
+    b: "小张",
+    c: "男",
+    d: {
+      code: "dept1_2",
+      entityType: "subEntity",
+      organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      name: "财务二科",
+      pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+      refcode: "dept1_2",
+      refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      isLeaf: "true",
+      refname: "财务二科"
+    },
+    key: "1"
+  },
+  {
+    a: "ASVAL_201903200004",
+    b: "小明",
+    c: "男",
+    d: {
+      code: "dept1_2",
+      entityType: "subEntity",
+      organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      name: "财务二科",
+      pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+      refcode: "dept1_2",
+      refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      isLeaf: "true",
+      refname: "财务二科"
+    },
+    key: "2"
+  },
+  {
+    a: "ASVAL_201903120002",
+    b: "小红",
+    c: "女",
+    d: {
+      code: "dept1_1",
+      entityType: "subEntity",
+      organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      name: "财务一科",
+      pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+      refcode: "dept1_1",
+      refpk: "9711d912-3184-4063-90c5-1facc727813c",
+      id: "9711d912-3184-4063-90c5-1facc727813c",
+      isLeaf: "true",
+      refname: "财务一科"
+    },
+    key: "3"
+  }
+];
+
+class Demo0503 extends Component {
+  constructor(props, context) {
+    super(props);
+    // 编辑态下每个单元格对应的编辑模式组件写在 EditModal 组件中，以 key 值对应
+    this.columns = [
+      {
+        title: "员工编号",
+        dataIndex: "a",
+        key: "a"
+      },
+      {
+        title: "名字",
+        dataIndex: "b",
+        key: "b"
+      },
+      {
+        title: "性别",
+        dataIndex: "c",
+        key: "c",
+        width: 100
+      },
+      {
+        title: "部门",
+        dataIndex: "d",
+        key: "d",
+        width: 215,
+        render: (text, record, index) => record.d.name
+      }
+    ];
+
+    this.state = {
+      dataSource: dataSource,
+      isEditing: false,
+      currentIndex: null
+    };
+  }
+
+  edit = () => {
+    if (this.state.currentIndex === null) return;
+    this.setState({ isEditing: true });
+  };
+
+  abortEdit = () => {
+    this.setState({ isEditing: false });
+  };
+
+  commitChange = (editedRowData, rowIndex) => {
+    console.log(editedRowData)
+    console.log(rowIndex)
+    let dataSource = [...this.state.dataSource];
+    dataSource[rowIndex] = editedRowData;
+    this.setState({ dataSource });
+  };
+
+  handleRowHover = (index, record) => {
+    this.setState({ currentIndex: index });
+  };
+
+  hideEditModal = () => {
+    this.setState({ isEditing: false });
+  }
+
+  renderRowHover = () => {
+    return (
+      <div className={"opt-btns"}>
+        <Button colors="dark" onClick={this.edit}>
+          编辑
+        </Button>
+      </div>
+    );
+  };
+
+
+  render() {
+    const { dataSource, isEditing, currentIndex } = this.state;
+    const columns = this.columns;
+    return (
+      <div className="demo0503 u-editable-table">
+        <Table
+          data={dataSource}
+          columns={columns}
+          height={40}
+          onRowHover={this.handleRowHover}
+          hoverContent={this.renderRowHover}
+        />
+        {
+          isEditing ? (
+            <EditModal
+              show={isEditing}
+              onHide={this.hideEditModal}
+              columns={columns}
+              data={dataSource[currentIndex]}
+              onSubmit={this.commitChange}
+              currentIndex={currentIndex}
+            />
+          ) : null
+        }
+      </div>
+    );
+  }
+}
+
+export default Demo0503;
--- a/demo/demolist/Demo0503.scss
+++ b/demo/demolist/Demo0503.scss
@ -0,0 +1,54 @@
+.demo0503-m-b {
+  .u-form-group {
+    overflow: hidden;
+  }
+  .u-form-control {
+    font-size: 12px;
+  }
+
+  .u-modal-title {
+    text-align: center;
+  }
+
+  .editable-cell {
+    display: block;
+    float: left;
+    width: 220px;
+    padding-right: 25px;
+  }
+
+  .u-label {
+    display: block;
+    float: left;
+    text-align: right;
+    width: 110px;
+    box-sizing: border-box;
+    padding-right: 10px;
+    font-size: 12px;
+    height: 32px;
+    line-height: 32px;
+  }
+  .required {
+    &::before {
+      content: "*";
+      position: absolute;
+      top: 9px;
+      left: -9px;
+      color: red;
+      font-size: 18px;
+    }
+  }
+  .required-icon {
+    position: absolute;
+    top: 2px;
+    color: #F44336;
+    font-size: 20px;
+  }
+}
+
+.u-editable-table-tp {
+  z-index: 9999 !important;
+  .tp-content {
+    color: #F44336;
+  }
+}
--- a/demo/demolist/Demo0602.js
+++ b/demo/demolist/Demo0602.js
@ -84,8 +84,8 @@ const columns = [
        render(text, record, index) {
            return (
                <div className='operation-btn'>
-                  <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-                      <a href="javascript:;" tooltip={text} >
+                  <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，订单编号为:' + record.orderCode}>
+                      <a href="javascript:;" >
                      一些操作
                      </a>
                  </Popconfirm>
--- a/demo/demolist/Demo0702.js
+++ b/demo/demolist/Demo0702.js
@ -6,10 +6,6 @@
 * demo0702
 */

-/**
- * @description 
- */
-
 import React, { Component } from 'react';
 import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";

@ -17,8 +13,7 @@ import Table from '../../src';
 import multiSelect from '../../src/lib/multiSelect';
 import sort from '../../src/lib/sort';

-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
+const { Item } = Menu;

 const data27 = [
  {
@ -106,38 +101,34 @@ class Demo27 extends Component {
  getSelectedDataFunc = data => {
    console.log(data);
  }
-  onClick = (item) => {
+  onSelect = (item) => {
    console.log(item);
  }

  render() {
    const menu1 = (
-      <Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
-        <SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
-          <MenuItemGroup title="Item 1">
-            <Menu.Item key="1">选项 1</Menu.Item>
-            <Menu.Item key="2">选项 2</Menu.Item>
-          </MenuItemGroup>
-          <MenuItemGroup title="Iteom 2">
-            <Menu.Item key="3">选项 3</Menu.Item>
-            <Menu.Item key="4">选项 4</Menu.Item>
-          </MenuItemGroup>
-        </SubMenu>
-      </Menu>)
+      <Menu
+          onSelect={this.onSelect}>
+          <Item key="1">模态弹出</Item>
+          <Item key="2">链接跳转</Item>
+          <Item key="3">打开新页</Item>
+      </Menu>);
    let multiObj = {
      type: "checkbox"
    };
    let columns27 = [
-      {
-        title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
-          return <Dropdown
-            trigger={['click']}
-            overlay={menu1}
-            animation="slide-up"
-          >
-            <Icon style={{ "visibility": "hidden" }} type="uf-eye" />
-          </Dropdown>
-        }
+      { title: "关联",dataIndex: "link",key: "link",width: 80, 
+          render: (text, record, index) => {
+            return (
+              <Dropdown
+                  trigger={['click']}
+                  overlay={menu1}
+                  animation="slide-up"
+              >
+                  <Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
+              </Dropdown>
+            )
+          }
      },
      {
        title: "姓名",
--- a/demo/demolist/Demo1103.js
+++ b/demo/demolist/Demo1103.js
@ -12,10 +12,10 @@ import {Button,Tooltip,} from "tinper-bee";
 import Table from "../../src";

 const columns = [
-  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
-  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
-  { title: "性别", dataIndex: "c", key: "c", width: 500 },
-  { title: "部门", dataIndex: "d", key: "d", width: 200 }
+  { title: "员工编号", dataIndex: "a", key: "a", width: 150, className: "rowClassName"},
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
+  { title: "性别", dataIndex: "c", key: "c", width: 100 },
+  { title: "部门", dataIndex: "d", key: "d", width: 100 }
 ];

 const data = [
--- a/demo/demolist/Demo1105.js
+++ b/demo/demolist/Demo1105.js
@ -16,7 +16,12 @@ const columns = [
    { title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
    { title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
    { title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
-    { title: "单据状态", dataIndex: "status", key: "status", width: 100 },
+    { title: "单据状态", dataIndex: "status", key: "status", width: 100, 
+      render: (text, record, index) => {
+        return (
+          <Tag colors={text.type}>{text.desc}</Tag>
+        );
+    }},
    { title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
    { title: "单位", dataIndex: "unit", key: "unit", width: 100 },
    { title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
@ -29,7 +34,7 @@ const data = [
        supplier: "xx供应商", 
        orderDate: '2018年03月18日', 
        quantity: '100.00', 
-        status: '错误', 
+        status: {type:'success' ,desc:'正常'}, 
        submitter: '小张', 
        unit: 'pc', 
        sum:'8,487.00', 
@ -41,7 +46,7 @@ const data = [
        supplier: "xx供应商", 
        orderDate: '2018年02月05日', 
        quantity: '91.00', 
-        status: '正常', 
+        status: {type:'danger' ,desc:'异常'}, 
        submitter: '小红', 
        unit: 'pc', 
        sum:'675.00', 
@ -53,7 +58,7 @@ const data = [
        supplier: "xx供应商", 
        orderDate: '2018年07月01日', 
        quantity: '98.00', 
-        status: '异常', 
+        status: {type:'success' ,desc:'正常'}, 
        submitter: '小李', 
        unit: 'pc', 
        sum:'1,531.00', 
--- a/demo/demolist/Demo1106.js
+++ b/demo/demolist/Demo1106.js
@ -11,10 +11,10 @@ import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";

 const columns = [
-  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
-  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
-  { title: "性别", dataIndex: "c", key: "c", width: 500 },
-  { title: "部门", dataIndex: "d", key: "d", width: 200 }
+  { title: "员工编号", dataIndex: "a", key: "a", width: 150, className: "rowClassName"},
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
+  { title: "性别", dataIndex: "c", key: "c", width: 100 },
+  { title: "部门", dataIndex: "d", key: "d", width: 100 }
 ];

 const data = [
--- a/demo/demolist/Demo1107.js
+++ b/demo/demolist/Demo1107.js
@ -20,6 +20,14 @@ const columns = [
            return index + 1;
        }
    },
+    {
+        title: "图样",
+        dataIndex: "picture",
+        key: "picture",
+        render(text, record, index) {
+            return <img style={{height:'50px'}} src={text} alt="Picture"/>
+        }
+    },
    {
        title: "组织部门",
        dataIndex: "orgDept",
@ -55,14 +63,6 @@ const columns = [
        dataIndex: "repairTime",
        key: "repairTime",
        width: 150,
-    },
-    {
-        title: "图样",
-        dataIndex: "picture",
-        key: "picture",
-        render(text, record, index) {
-            return <img style={{height:'50px'}} src={text} alt="Picture"/>
-        }
    }
 ];

@ -72,40 +72,15 @@ const data = [
  { key: "3", orgDept: "组织3", facilityManageUnit: "部门3", docketnum: 35, num: "3", discoveryTime: "2019-04-10", repairTime: "2019-04-17", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg"}
 ];

-class Demo105 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data,
-      selectedRowIndex: 0
-    }
-  }
-  handleClick = () => {
-    console.log('这是第' , this.currentIndex , '行');
-    console.log('内容：' , this.currentRecord);
-  }
-
-  onRowHover=(index,record)=>{
-    this.currentIndex = index;
-    this.currentRecord = record;
-  }
-
-  getHoverContent=()=>{
-    return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
-  }
-
+class Demo1107 extends Component {
  render() {
    return (
        <Table
          columns={columns}
          data={data}
-          parentNodeId='parent'
-          hoverContent={this.getHoverContent}
-          onRowHover={this.onRowHover}
        />
    );
  }
 }

-export default Demo105;
+export default Demo1107;
--- a/demo/demolist/Demo1201.js
+++ b/demo/demolist/Demo1201.js
@ -1,7 +1,7 @@
 /**
 *
 * @title 拖拽改变行顺序
-* @parent 拖拽改变行顺序
+* @parent 行操作-拖拽
 * @description 拖拽改变行顺序
 * Demo1201
 */
@ -18,7 +18,7 @@ const columns = [
      return (
        <Tooltip inverse overlay={text}>
          <span tootip={text} style={{
-            display: "inline-block",
+            display: "block",
            width: "80px",
            textOverflow: "ellipsis",
            overflow: "hidden",
--- a/demo/demolist/Demo1301.js
+++ b/demo/demolist/Demo1301.js
@ -1,6 +1,6 @@
 /**
 *
-* @title 多选表格
+* @title 多选功能
 * @parent 行操作-选择
 * @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
 * demo1301
--- a/demo/demolist/Demo1304.js
+++ b/demo/demolist/Demo1304.js
@ -1,8 +1,8 @@
 /**
 *
-* @title 表格单选，且选中行填充颜色
-* @parent 表格-单选-radio-行选中
-* @description 表格增加单选、radio 和背景色的示例。
+* @title 单选功能
+* @parent 行操作-选择
+* @description 表格支持单选行操作，可自定义选中行背景色。
 * Demo1304
 */

@ -11,8 +11,6 @@ import {Button,Tooltip,Radio} from "tinper-bee";

 import Table from "../../src";

-
-
 const data = [
  { check: "ASVAL_201903280005",a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
  { check: "ASVAL_201903200004",a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -146,7 +146,7 @@
    width: 16px;
    height: 16px;
    text-align: center;
-    line-height: 16px;
+    line-height: 14px;
    border: 1px solid rgb(193, 199, 208);
    -webkit-user-select: none;
    -moz-user-select: none;
@ -165,9 +165,9 @@
  .u-table-row.selected {
    background: #FFF7E7; }
  .u-table tr.u-table-expanded-row {
-    background: #f7f7f7; }
+    background: #DFE1E6; }
    .u-table tr.u-table-expanded-row:hover {
-      background: #f7f7f7; }
+      background: #DFE1E6; }
    .u-table tr.u-table-expanded-row .u-table {
      z-index: 1; }
  .u-table-column-hidden {
@ -622,6 +622,24 @@
  position: absolute;
  top: -1000px; }

+.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
+  padding-left: 4px;
+  border: 1px solid #c1c7d0; }
+
+.u-editable-table .u-table .editable-cell-text-wrapper:hover {
+  padding-left: 4px;
+  border: 1px solid #a5adba; }
+
+.u-editable-table .u-table .editable-cell-input-wrapper:focus {
+  outline: none; }
+
+.u-editable-table-tp .tooltip-arrow {
+  top: 1px !important;
+  border-bottom-color: #F44336 !important; }
+
+.u-editable-table-tp .tooltip-inner {
+  border-color: #F44336 !important; }
+
 .selected {
  background: #FFF7E7; }

@ -631,10 +649,13 @@
    right: 15px; }

 .opt-btns .u-button {
+  margin: 0 4px;
  color: #fff;
-  background: #505F79; }
+  background: #505F79;
+  border-color: #505F79; }
  .opt-btns .u-button:hover, .opt-btns .u-button:active {
-    background: #344563; }
+    background: #344563;
+    border-color: #505F79; }

 .demo04.u-table tr:nth-child(2n) {
  background: #f7f9fb; }
@ -649,44 +670,137 @@
  padding-top: 0px;
  padding-bottom: 0px; }

-.demo0502 .u-table-row td {
+.demo0501 .u-table .u-row-hover .opt-btns button {
+  border-radius: 5px; }
+  .demo0501 .u-table .u-row-hover .opt-btns button:first-child {
+    margin-right: 10px; }
+
+.demo0501 .u-table .u-table-row td {
  padding: 5px 8px; }
-  .demo0502 .u-table-row td input.error {
-    border-color: #F44336; }
+  .demo0501 .u-table .u-table-row td input {
+    font-size: 12px;
+    padding-left: 5px; }

-.demo0502 .u-table-row .editable-cell {
+.demo0501 .u-table .u-table-row .u-form-control,
+.demo0501 .u-table .u-table-row .u-select-selection {
  height: 30px; }

-.demo0502 .u-table-row-hover .editable-cell-text-wrapper {
-  line-height: 18px;
-  border: 1px solid #c1c7d0; }
-
-.demo0502 .u-table-row .u-form-control,
-.demo0502 .u-table-row .u-select-selection {
-  height: 30px; }
-
-.demo0502 .editable-cell-text-wrapper {
+.demo0501 .u-table .editable-cell-text-wrapper {
  box-sizing: border-box;
  line-height: 20px;
  border-radius: 3px; }
-  .demo0502 .editable-cell-text-wrapper:hover {
-    line-height: 18px;
-    border: 1px solid #a5adba; }

-.demo0502 .require {
+.demo0501 .u-table .required {
+  margin-left: 10px;
+  position: relative; }
+  .demo0501 .u-table .required::before {
+    content: " ";
+    border: 2px solid #F44336;
+    width: 0;
+    height: 12px;
+    position: absolute;
+    top: 9px;
+    left: -8px; }
+  .demo0501 .u-table .required span.u-input-group {
+    display: block; }
+
+.demo0501 .u-table .verify-cell {
+  padding-right: 25px !important; }
+
+.demo0501 .u-table .required-icon {
  position: absolute;
  top: 2px;
  color: #F44336;
  font-size: 20px; }

-.help-tip {
+.demo0501 .u-table .ref-input-wrap {
+  width: 160px !important; }
+
+.u-editable-table-tp .tp-content {
  color: #F44336; }

-.tp-0502 .tooltip-arrow {
-  border-bottom-color: #F44336 !important; }
+.u-editable-table .u-table .u-table-row td {
+  padding: 5px 8px; }
+  .u-editable-table .u-table .u-table-row td input {
+    padding-left: 5px;
+    font-size: 12px; }
+    .u-editable-table .u-table .u-table-row td input.error {
+      border-color: #F44336; }

-.tp-0502 .tooltip-inner {
-  border-color: #F44336 !important; }
+.u-editable-table .u-table .u-table-row .editable-cell {
+  height: 30px; }
+
+.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
+  line-height: 19px; }
+
+.u-editable-table .u-table .u-table-row .u-form-control,
+.u-editable-table .u-table .u-table-row .u-select-selection {
+  height: 30px; }
+
+.u-editable-table .u-table .editable-cell-text-wrapper {
+  box-sizing: border-box;
+  line-height: 20px;
+  border-radius: 3px; }
+
+.u-editable-table .u-table .editable-cell-input-wrapper {
+  padding-right: 0; }
+
+.u-editable-table .u-table .verify-cell {
+  padding-right: 25px !important; }
+
+.u-editable-table .u-table .require {
+  position: absolute;
+  top: 2px;
+  color: #F44336;
+  font-size: 20px; }
+
+.u-editable-table-tp .tp-content {
+  color: #F44336; }
+
+.demo0503-m-b .u-form-group {
+  overflow: hidden; }
+
+.demo0503-m-b .u-form-control {
+  font-size: 12px; }
+
+.demo0503-m-b .u-modal-title {
+  text-align: center; }
+
+.demo0503-m-b .editable-cell {
+  display: block;
+  float: left;
+  width: 220px;
+  padding-right: 25px; }
+
+.demo0503-m-b .u-label {
+  display: block;
+  float: left;
+  text-align: right;
+  width: 110px;
+  box-sizing: border-box;
+  padding-right: 10px;
+  font-size: 12px;
+  height: 32px;
+  line-height: 32px; }
+
+.demo0503-m-b .required::before {
+  content: "*";
+  position: absolute;
+  top: 9px;
+  left: -9px;
+  color: red;
+  font-size: 18px; }
+
+.demo0503-m-b .required-icon {
+  position: absolute;
+  top: 2px;
+  color: #F44336;
+  font-size: 20px; }
+
+.u-editable-table-tp {
+  z-index: 9999 !important; }
+  .u-editable-table-tp .tp-content {
+    color: #F44336; }

 th .drop-menu .uf {
  font-size: 12px;
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/docs/api.md
+++ b/docs/api.md
@ -3,7 +3,7 @@
 ## 何时使用
 - 当有大量结构化的数据需要展现时；
 - Table组件拥有多种可自由组合使用的功能，包括：大数据渲染、拖拽列、过滤列、排序、多选、分页、自定义操作、合计、搜索等复杂行为；
- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](http://design.yonyoucloud.com/tinper-bee/bee-complex-grid)。
+- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](https://design.yonyoucloud.com/tinper-acs/ac-complex-grid)。

 ## 如何使用
 ```
@ -70,9 +70,10 @@ import 'bee-table/build/Table.css';
 | height | 自定义表格行高 | number | - |
 | headerHeight | 自定义表头行高 | number | - |
 | size | 表格大小 | `sm | md | lg` | 'md' |
+| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
+| bodyDisplayInRow |  设置表体的内容显示一行，超出显示省略号 | bool | 
 | rowDraggAble  | 是否增加行交换顺序功能 | boolean| false

-
 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)

 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
@ -105,8 +106,7 @@ import 'bee-table/build/Table.css';
 | filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
 | filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
 | textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
-| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
-| bodyDisplayInRow |  设置表体的内容显示一行，超出显示省略号 | bool | 
+

 ## mixin

--- a/package.json
+++ b/package.json
@ -1,95 +1,97 @@
 {
- "name": "bee-table",
- "version": "2.0.15",
- "description": "Table ui component for react",
- "keywords": [
-  "react",
-  "react-component",
-  "bee-table",
-  "iuap-design",
-  "tinper-bee",
-  "Table"
- ],
- "engines": {
-  "node": ">=6.0.0"
- },
- "jest": {
-  "moduleFileExtensions": [
-   "js",
-   "jsx"
+  "name": "bee-table",
+  "version": "2.0.15",
+  "description": "Table ui component for react",
+  "keywords": [
+    "react",
+    "react-component",
+    "bee-table",
+    "iuap-design",
+    "tinper-bee",
+    "Table"
  ],
-  "transform": {
-   "^.+\\.js$": "babel-jest"
+  "engines": {
+    "node": ">=6.0.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
+  },
+  "homepage": "https://github.com/tinper-bee/bee-table.git",
+  "author": "Yonyou FED",
+  "repository": "http://github.com/tinper-bee/bee-table",
+  "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
+  "license": "MIT",
+  "main": "./build/index.js",
+  "config": {
+    "port": 3000,
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "scripts": {
+    "dev": "bee-tools run start",
+    "build": "bee-tools run build",
+    "lint": "bee-tools run lint",
+    "test": "jest",
+    "chrome": "bee-tools run chrome",
+    "coveralls": "jest",
+    "browsers": "bee-tools run browsers",
+    "pub": "bee-tools run pub",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
+  },
+  "dependencies": {
+    "bee-button": "latest",
+    "bee-checkbox": "latest",
+    "bee-datepicker": "^2.0.28",
+    "bee-dropdown": "^2.0.4",
+    "bee-form-control": "latest",
+    "bee-icon": "latest",
+    "bee-input-number": "^2.0.7",
+    "bee-loading": "^1.0.9",
+    "bee-locale": "0.0.13",
+    "bee-menus": "^2.0.6",
+    "bee-radio": "^2.0.8",
+    "bee-select": "^2.0.11",
+    "classnames": "^2.2.5",
+    "component-classes": "^1.2.6",
+    "lodash.clonedeep": "^4.5.0",
+    "object-path": "^0.11.3",
+    "ref-tree": "^2.0.1-beta.1",
+    "shallowequal": "^1.0.2",
+    "throttle-debounce": "^2.0.1",
+    "tinper-bee-core": "latest",
+    "warning": "^3.0.0"
+  },
+  "peerDependencies": {
+    "react": "^15.3.0 || ^16.0",
+    "react-dom": "^15.3.0 || ^16.0",
+    "prop-types": "^15.6.0"
+  },
+  "devDependencies": {
+    "babel-jest": "^22.0.4",
+    "bee-clipboard": "^2.0.0",
+    "bee-drawer": "0.0.2",
+    "bee-layout": "latest",
+    "bee-pagination": "^2.0.5",
+    "bee-panel": "latest",
+    "bee-popover": "^2.0.0",
+    "chai": "^3.5.0",
+    "console-polyfill": "~0.2.1",
+    "cz-conventional-changelog": "^2.1.0",
+    "enzyme": "^2.9.1",
+    "es5-shim": "~4.1.10",
+    "jest": "^22.0.4",
+    "react": "^16.6.3",
+    "react-addons-test-utils": "^15.5.0",
+    "react-dom": "^16.6.3",
+    "ref-tree": "^2.0.1-beta.1",
+    "reqwest": "^2.0.5",
+    "tinper-bee": "latest"
  }
- },
- "homepage": "https://github.com/tinper-bee/bee-table.git",
- "author": "Yonyou FED",
- "repository": "http://github.com/tinper-bee/bee-table",
- "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
- "license": "MIT",
- "main": "./build/index.js",
- "config": {
-  "port": 3000,
-  "commitizen": {
-   "path": "./node_modules/cz-conventional-changelog"
-  }
- },
- "scripts": {
-  "dev": "bee-tools run start",
-  "build": "bee-tools run build",
-  "lint": "bee-tools run lint",
-  "test": "jest",
-  "chrome": "bee-tools run chrome",
-  "coveralls": "jest",
-  "browsers": "bee-tools run browsers",
-  "pub": "bee-tools run pub",
-  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
- },
- "dependencies": {
-  "bee-button": "latest",
-  "bee-checkbox": "latest",
-  "bee-datepicker": "^2.0.9",
-  "bee-dropdown": "^2.0.3",
-  "bee-form-control": "latest",
-  "bee-icon": "latest",
-  "bee-input-number": "^2.0.5",
-  "bee-loading": "^1.0.6",
-  "bee-locale": "0.0.11",
-  "bee-menus": "^2.0.2",
-  "bee-select": "^2.0.9",
-  "classnames": "^2.2.5",
-  "component-classes": "^1.2.6",
-  "lodash.clonedeep": "^4.5.0",
-  "object-path": "^0.11.3",
-  "shallowequal": "^1.0.2",
-  "throttle-debounce": "^2.0.1",
-  "tinper-bee-core": "latest",
-  "warning": "^3.0.0"
- },
- "peerDependencies": {
-  "react": "^15.3.0 || ^16.0",
-  "react-dom": "^15.3.0 || ^16.0",
-  "prop-types": "^15.6.0"
- },
- "devDependencies": {
-  "babel-jest": "^22.0.4",
-  "bee-clipboard": "^2.0.0",
-  "bee-drawer": "0.0.2",
-  "bee-layout": "latest",
-  "bee-pagination": "^2.0.5",
-  "bee-panel": "latest",
-  "bee-popover": "^2.0.0",
-  "chai": "^3.5.0",
-  "console-polyfill": "~0.2.1",
-  "cz-conventional-changelog": "^2.1.0",
-  "enzyme": "^2.9.1",
-  "es5-shim": "~4.1.10",
-  "jest": "^22.0.4",
-  "react": "^16.6.3",
-  "react-addons-test-utils": "^15.5.0",
-  "react-dom": "^16.6.3",
-  "ref-tree": "^2.0.1-beta.1",
-  "reqwest": "^2.0.5",
-  "tinper-bee": "latest"
- }
-}
+}
--- a/src/Table.scss
+++ b/src/Table.scss
@ -270,7 +270,7 @@ $icon-color:#505F79;
      width: 16px;
      height: 16px;
      text-align: center;
-      line-height: 16px;
+      line-height: 14px;
      border: 1px solid $table-border-color;
      user-select: none;
      background: #fff;
@ -297,9 +297,9 @@ $icon-color:#505F79;
    }
  }
  tr.u-table-expanded-row {
-    background: #f7f7f7;
+    background: #DFE1E6;
    &:hover {
-      background: #f7f7f7;
+      background: #DFE1E6;
    }
    .u-table {
      // padding: 0 40px 0 20px;
@ -532,7 +532,7 @@ $icon-color:#505F79;
    &-pop-cont{
      margin: 0px;
      max-height: 300px;
-      overflow-y: scroll;
+      overflow-y: auto;
      color:#212121;
    }
    &-clear-setting{ 
@ -971,3 +971,36 @@ $icon-color:#505F79;
  position: absolute;
  top:-1000px;
 }
+
+.u-editable-table .u-table {
+  .u-table-row-hover {
+    .editable-cell-text-wrapper {
+      padding-left: 4px;
+      border: 1px solid #c1c7d0;
+    }
+  }
+
+  .editable-cell-text-wrapper {
+    &:hover {
+      padding-left: 4px;
+      border: 1px solid #a5adba;
+    }
+  }
+
+  .editable-cell-input-wrapper {
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.u-editable-table-tp {
+  .tooltip-arrow {
+    top: 1px !important;
+    border-bottom-color: #F44336 !important;
+  }
+
+  .tooltip-inner {
+    border-color: #F44336 !important;
+  }
+}