API文档加三级标题、解决无滚动条时，拖拽行报错问题、树形表格的图标换成箭头

2019-04-30 10:01:58 +08:00 · 2019-04-30 10:01:58 +08:00 · 527b2f20d6
parent 6a4e574a1a
commit 527b2f20d6
22 changed files with 472 additions and 108 deletions
--- a/build/ExpandIcon.js
+++ b/build/ExpandIcon.js
@ -16,6 +16,10 @@ var _shallowequal = require('shallowequal');

 var _shallowequal2 = _interopRequireDefault(_shallowequal);

+var _beeIcon = require('bee-icon');
+
+var _beeIcon2 = _interopRequireDefault(_beeIcon);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

 function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@ -60,8 +64,9 @@ var ExpandIcon = function (_Component) {

    if (expandable && !isHiddenExpandIcon) {
      var expandClassName = expanded ? 'expanded' : 'collapsed';
-      return _react2["default"].createElement('span', {
+      return _react2["default"].createElement(_beeIcon2["default"], {
        className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName,
+        type: expanded ? 'uf-triangle-down' : 'uf-triangle-right',
        onClick: function onClick(e) {
          return onExpand(!expanded, record, e);
        }
--- a/build/Table.css
+++ b/build/Table.css
@ -1,5 +1,169 @@
+@charset "UTF-8";
 /* FormGroup */
 /*  Navlayout  */
+/* FormGroup */
+/*  Navlayout  */
+/**
+  * 加载背景
+  */
+/**
+  * 文字
+  */
+.u-loading-desc {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+  color: #212121;
+  text-align: center; }
+
+/**
+  * default样式 单个圆圈加载
+  */
+.u-loading.u-loading-rotate > div {
+  position: absolute;
+  border-radius: 100%;
+  margin: 2px;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  width: 40px;
+  height: 40px;
+  top: 50%;
+  left: 50%;
+  margin-left: -22px;
+  margin-top: -22px;
+  background: transparent !important;
+  display: inline-block;
+  -webkit-animation: rotate 1s 0s linear infinite;
+  animation: rotate 1s 0s linear infinite;
+  text-align: center;
+  line-height: 40px; }
+  .u-loading.u-loading-rotate > div > img {
+    width: 40px; }
+  .u-loading.u-loading-rotate > div > .uf {
+    color: #0084ff;
+    font-size: 40px;
+    padding: 0; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
+  margin-left: -35px;
+  margin-top: -35px;
+  width: 60px;
+  height: 60px;
+  line-height: 60px; }
+  .u-loading.u-loading-rotate.u-loading-rotate-lg > div > img {
+    width: 60px; }
+  .u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
+    font-size: 60px; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
+  margin-left: -15px;
+  margin-top: -15px;
+  width: 25px;
+  height: 25px;
+  line-height: 25px; }
+  .u-loading.u-loading-rotate.u-loading-rotate-sm > div > img {
+    width: 25px; }
+  .u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
+    font-size: 25px; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
+  color: #3f51b5; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
+  color: #4caf50; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
+  color: #ff9800; }
+
+.u-loading-backdrop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1900;
+  background-color: rgba(255, 255, 255, 0.4); }
+  .u-loading-backdrop.full-screen {
+    position: fixed; }
+
+@keyframes rotate {
+  0% {
+    -webkit-transform: rotate(0deg) scale(1);
+    transform: rotate(0deg) scale(1); }
+  50% {
+    -webkit-transform: rotate(180deg) scale(1);
+    transform: rotate(180deg) scale(1); }
+  100% {
+    -webkit-transform: rotate(360deg) scale(1);
+    transform: rotate(360deg) scale(1); } }
+
+.u-loading.u-loading-line {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -30px;
+  margin-left: -25px; }
+  .u-loading.u-loading-line > div {
+    background-color: #C2C3C5;
+    width: 6px;
+    height: 50px;
+    border-radius: 2px;
+    margin: 2px;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    display: inline-block; }
+  .u-loading.u-loading-line.u-loading-line-lg {
+    margin-top: -50px;
+    margin-left: -30px; }
+    .u-loading.u-loading-line.u-loading-line-lg > div {
+      width: 8px;
+      height: 90px; }
+  .u-loading.u-loading-line.u-loading-line-sm {
+    margin-top: -22px;
+    margin-left: -20px; }
+    .u-loading.u-loading-line.u-loading-line-sm > div {
+      width: 4px;
+      height: 35px; }
+  .u-loading.u-loading-line div:nth-child(1) {
+    -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #F44336; }
+  .u-loading.u-loading-line div:nth-child(2) {
+    -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #7ED321; }
+  .u-loading.u-loading-line div:nth-child(3) {
+    -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #0084FF; }
+  .u-loading.u-loading-line div:nth-child(4) {
+    -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #FF9800; }
+  .u-loading.u-loading-line div:nth-child(5) {
+    -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #D0021B; }
+  .u-loading.u-loading-line.u-loading-line-primary > div {
+    background-color: #3f51b5; }
+  .u-loading.u-loading-line.u-loading-line-success > div {
+    background-color: #4caf50; }
+  .u-loading.u-loading-line.u-loading-line-warning > div {
+    background-color: #ff9800; }
+
+@keyframes line-scale {
+  0% {
+    -webkit-transform: scaley(1);
+    transform: scaley(1); }
+  50% {
+    -webkit-transform: scaley(0.4);
+    transform: scaley(0.4); }
+  100% {
+    -webkit-transform: scaley(1);
+    transform: scaley(1); } }
+
 .u-table {
  font-size: 12px;
  color: #212121;
@ -132,7 +296,12 @@
    text-align: center;
    position: relative; }
    .u-table-placeholder .table-nodata {
-      font-size: 48px; }
+      font-size: 40px;
+      line-height: 44px; }
+      .u-table-placeholder .table-nodata + span {
+        font-size: 12px;
+        line-height: 12px;
+        display: block; }
  .u-table-expand-icon-col {
    width: 10px; }
  .u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
@ -143,22 +312,19 @@
    cursor: pointer;
    display: inline-block;
    margin-right: 0px;
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
    text-align: center;
    line-height: 14px;
-    border: 1px solid rgb(193, 199, 208);
    user-select: none;
-    background: #fff;
    margin-right: 10px; }
+    .u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
+      font-size: 12px;
+      padding: 0; }
  .u-table-row-spaced, .u-table-expanded-row-spaced {
    visibility: hidden; }
  .u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
    content: "."; }
-  .u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
-    content: "-"; }
-  .u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
-    content: "+"; }
  .u-table-row.selected {
    background: #FFF7E7; }
  .u-table tr.u-table-expanded-row {
--- a/build/Table.js
+++ b/build/Table.js
@ -142,7 +142,16 @@ var defaultProps = {
    return body;
  },
  emptyText: function emptyText() {
-    return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-nodata', className: 'table-nodata' });
+    return _react2["default"].createElement(
+      'div',
+      null,
+      _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-nodata', className: 'table-nodata' }),
+      _react2["default"].createElement(
+        'span',
+        null,
+        '\u6682\u65E0\u6570\u636E'
+      )
+    );
  },
  columns: [],
  minColumnWidth: 80,
--- a/build/TableRow.js
+++ b/build/TableRow.js
@ -164,6 +164,8 @@ var TableRow = function (_Component) {
          _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
          _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');

+      _table_trs = _table_trs ? _table_trs : contentTable.querySelector('.u-table table tbody');
+
      _this.synchronizeTrStyle(_table_trs, currentIndex, type);
      if (_table_fixed_left_trs) {
        _this.synchronizeTrStyle(_table_fixed_left_trs, currentIndex, type);
--- 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/demolist/Demo0501.js
+++ b/demo/demolist/Demo0501.js
@ -1,6 +1,6 @@
 /**
 *
- * @title 行编辑 - 行内编辑
+ * @title 行内编辑
 * @parent 编辑 Editor
 * @description 可以对行进行编辑的表格
 * demo0501
--- a/demo/demolist/Demo0501.scss
+++ b/demo/demolist/Demo0501.scss
@ -2,7 +2,7 @@
  .u-row-hover {
    .opt-btns {
      button {
-        border-radius: 5px;
+        border-radius: 3px;

        &:first-child {
          margin-right: 10px;
--- a/demo/demolist/Demo0503.js
+++ b/demo/demolist/Demo0503.js
@ -1,6 +1,6 @@
 /**
 *
- * @title 行编辑 - 弹框编辑
+ * @title 弹框（表单）编辑
 * @parent 编辑 Editor
 * @description 以弹框形式以对行进行编辑的表格
 * demo0503
--- a/demo/demolist/Demo0505.js
+++ b/demo/demolist/Demo0505.js
@ -1,6 +1,6 @@
 /**
 *
- * @title 全表编辑
+ * @title 全表格编辑
 * @parent 编辑 Editor
 * @description 以行内编辑形式对全表数据进行编辑
 * demo0505
--- a/demo/demolist/Demo0505.scss
+++ b/demo/demolist/Demo0505.scss
@ -4,7 +4,7 @@
    margin-bottom: 15px;

    button {
-      border-radius: 5px;
+      border-radius: 3px;

      &:first-child {
        margin-right: 10px;
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -1,5 +1,155 @@
+@charset "UTF-8";
 /* FormGroup */
 /*  Navlayout  */
+/* FormGroup */
+/*  Navlayout  */
+/**
+  * 加载背景
+  */
+/**
+  * 文字
+  */
+.u-loading-desc {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+  color: #212121;
+  text-align: center; }
+
+/**
+  * default样式 单个圆圈加载
+  */
+.u-loading.u-loading-rotate > div {
+  position: absolute;
+  border-radius: 100%;
+  margin: 2px;
+  animation-fill-mode: both;
+  width: 40px;
+  height: 40px;
+  top: 50%;
+  left: 50%;
+  margin-left: -22px;
+  margin-top: -22px;
+  background: transparent !important;
+  display: inline-block;
+  animation: rotate 1s 0s linear infinite;
+  text-align: center;
+  line-height: 40px; }
+  .u-loading.u-loading-rotate > div > img {
+    width: 40px; }
+  .u-loading.u-loading-rotate > div > .uf {
+    color: #0084ff;
+    font-size: 40px;
+    padding: 0; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
+  margin-left: -35px;
+  margin-top: -35px;
+  width: 60px;
+  height: 60px;
+  line-height: 60px; }
+  .u-loading.u-loading-rotate.u-loading-rotate-lg > div > img {
+    width: 60px; }
+  .u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
+    font-size: 60px; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
+  margin-left: -15px;
+  margin-top: -15px;
+  width: 25px;
+  height: 25px;
+  line-height: 25px; }
+  .u-loading.u-loading-rotate.u-loading-rotate-sm > div > img {
+    width: 25px; }
+  .u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
+    font-size: 25px; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
+  color: #3f51b5; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
+  color: #4caf50; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
+  color: #ff9800; }
+
+.u-loading-backdrop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1900;
+  background-color: rgba(255, 255, 255, 0.4); }
+  .u-loading-backdrop.full-screen {
+    position: fixed; }
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg) scale(1); }
+  50% {
+    transform: rotate(180deg) scale(1); }
+  100% {
+    transform: rotate(360deg) scale(1); } }
+
+.u-loading.u-loading-line {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -30px;
+  margin-left: -25px; }
+  .u-loading.u-loading-line > div {
+    background-color: #C2C3C5;
+    width: 6px;
+    height: 50px;
+    border-radius: 2px;
+    margin: 2px;
+    animation-fill-mode: both;
+    display: inline-block; }
+  .u-loading.u-loading-line.u-loading-line-lg {
+    margin-top: -50px;
+    margin-left: -30px; }
+    .u-loading.u-loading-line.u-loading-line-lg > div {
+      width: 8px;
+      height: 90px; }
+  .u-loading.u-loading-line.u-loading-line-sm {
+    margin-top: -22px;
+    margin-left: -20px; }
+    .u-loading.u-loading-line.u-loading-line-sm > div {
+      width: 4px;
+      height: 35px; }
+  .u-loading.u-loading-line div:nth-child(1) {
+    animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #F44336; }
+  .u-loading.u-loading-line div:nth-child(2) {
+    animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #7ED321; }
+  .u-loading.u-loading-line div:nth-child(3) {
+    animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #0084FF; }
+  .u-loading.u-loading-line div:nth-child(4) {
+    animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #FF9800; }
+  .u-loading.u-loading-line div:nth-child(5) {
+    animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #D0021B; }
+  .u-loading.u-loading-line.u-loading-line-primary > div {
+    background-color: #3f51b5; }
+  .u-loading.u-loading-line.u-loading-line-success > div {
+    background-color: #4caf50; }
+  .u-loading.u-loading-line.u-loading-line-warning > div {
+    background-color: #ff9800; }
+
+@keyframes line-scale {
+  0% {
+    transform: scaley(1); }
+  50% {
+    transform: scaley(0.4); }
+  100% {
+    transform: scaley(1); } }
+
 .u-table {
  font-size: 12px;
  color: #212121;
@ -132,7 +282,12 @@
    text-align: center;
    position: relative; }
    .u-table-placeholder .table-nodata {
-      font-size: 48px; }
+      font-size: 40px;
+      line-height: 44px; }
+      .u-table-placeholder .table-nodata + span {
+        font-size: 12px;
+        line-height: 12px;
+        display: block; }
  .u-table-expand-icon-col {
    width: 10px; }
  .u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
@ -673,7 +828,7 @@
  padding-bottom: 0px; }

 .demo0501 .u-table .u-row-hover .opt-btns button {
-  border-radius: 5px; }
+  border-radius: 3px; }
  .demo0501 .u-table .u-row-hover .opt-btns button:first-child {
    margin-right: 10px; }
  .demo0501 .u-table .u-row-hover .opt-btns button.btn-abort {
@ -818,7 +973,7 @@
 .demo0505 .opt-btns {
  margin-bottom: 15px; }
  .demo0505 .opt-btns button {
-    border-radius: 5px; }
+    border-radius: 3px; }
    .demo0505 .opt-btns button:first-child {
      margin-right: 10px; }
    .demo0505 .opt-btns button.btn-abort {
--- 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
@ -2,9 +2,19 @@

 ## 何时使用

- 当有大量结构化的数据需要展现时；
- Table组件拥有多种可自由组合使用的功能，包括：大数据渲染、拖拽列、过滤列、排序、多选、分页、自定义操作、合计、搜索等复杂行为；
- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](https://design.yonyoucloud.com/tinper-acs/bee-complex-grid)。
+- 当有大量结构化的数据需要展现时，可使用 `Table` 组件；
+-  `Table`  组件拥有多种可自由组合使用的功能特性，包括：
+	1.  大数据渲染
+	2.  拖拽交换、拖拽改变列宽
+	3.  行选择（单选/多选）
+	4.  表体滚动
+	5.  数据操作
+	6.  支持多种表格编辑形式
+	7.  列锁定 
+	8.  列过滤
+	9.  列隐藏
+	10. 列排序
+- `Grid` 组件聚合了 `Table` 组件的所有功能特性，并在此基础上封装了导出数据、工具栏、分页、数据关联等高级功能。可达到随用随取、开箱即用的体验。当需要使用多种功能组合的 `Table` 展示时，推荐使用[Grid组件](https://design.yonyoucloud.com/tinper-acs/bee-complex-grid)。

 ## 如何使用

--- a/src/Table.js
+++ b/src/Table.js
@ -80,7 +80,7 @@ const defaultProps = {
  scroll: {},
  rowRef: () => null,
  getBodyWrapper: body => body,
-  emptyText: () => <Icon type="uf-nodata" className="table-nodata"></Icon>,
+  emptyText: () => <div><Icon type="uf-nodata" className="table-nodata"></Icon><span>暂无数据</span></div>,
  columns:[],
  minColumnWidth: 80,
  locale:{},
--- a/src/Table.scss
+++ b/src/Table.scss
@ -1,6 +1,6 @@
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
-// @import "../node_modules/bee-loading/src/Loading";
+@import "../node_modules/bee-loading/src/Loading";

 $text-color: $font-color-base;
 $font-size-base: 12px;
@ -247,7 +247,15 @@ $icon-color:#505F79;
    border-bottom: 1px solid $table-border-color;
    text-align: center;
    position: relative;
-    .table-nodata{ font-size:48px; }
+    .table-nodata{ 
+      font-size: 40px; 
+      line-height: 44px;
+      + span{
+        font-size: 12px;
+        line-height: 12px;
+        display: block;
+      }
+    }
  }

  &-expand-icon-col {