Merge branch 'master' into lcj-demo-50x

2019-04-22 10:01:13 +08:00 · 2019-04-22 10:01:13 +08:00 · 6fe1233f27
parent f4a4b56070 7b8bbefa3c
commit 6fe1233f27
59 changed files with 14460 additions and 3483 deletions
--- a/README.md
+++ b/README.md
@ -94,7 +94,7 @@ class Demo extends Component {
 | title                  | 表格标题                                     | Function                               | -               |
 | footer                 | 表格尾部                                     | Function                               | -               |
 | emptyText              | 无数据时显示的内容                                | Function                               | () => 'No Data' |
-| scroll                 | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object                                 | {}              |
+| scroll                 | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度| `{ x: number | true | 百分比, y: number }`  | {}     |
 | rowRef                 | 获取行的ref                                  | Function(record, index, indent):string | () => null      |
 | getBodyWrapper         | 添加对table body的包装                         | Function(body)                         | body => body    |
 | expandedRowRender      | 额外的展开行                                   | Function(record, index, indent):node | -               |
@ -115,6 +115,9 @@ class Demo extends Component {
 | onTableKeyDown       | 触发table的快捷键 | function| -
 | tabIndex       | 设置焦点顺序 | number | 0
 | loadBuffer       | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
+| height | 自定义表格行高 | number | - |
+| headerHeight | 自定义表头行高 | number | - |
+| size | 表格大小 | `sm | md | lg` | 'md' |

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

--- a/build/Table.css
+++ b/build/Table.css
@ -4,7 +4,7 @@
  font-size: 12px;
  color: #212121;
  position: relative;
-  line-height: 1.5;
+  line-height: 1.33;
  overflow: hidden; }
  .u-table-body {
    position: relative; }
@ -47,13 +47,21 @@
    background: rgb(235, 236, 240); }
  .u-table th,
  .u-table td {
-    padding: 12px 8px;
+    padding: 12px 16px;
    word-break: break-all; }
+    .u-table th.text-center,
+    .u-table td.text-center {
+      text-align: center; }
+    .u-table th.text-right,
+    .u-table td.text-right {
+      text-align: right; }
  .u-table tr.filterable th {
    padding-top: 5px !important;
    padding-bottom: 5px !important; }
    .u-table tr.filterable th .filterContext {
      height: 35px; }
+    .u-table tr.filterable th .u-select-selection--single {
+      height: 26px; }
  .u-table-row-hover {
    background: rgb(235, 236, 240); }
  .u-table-scroll {
@ -80,7 +88,7 @@
    background: rgb(241, 242, 245);
    color: rgb(33, 33, 33); }
  .u-table.fixed-height td {
-    padding: 0px 8px; }
+    padding: 0px 16px; }
  .u-table-fixed-header .u-table-body {
    background: #fff;
    position: relative; }
@ -98,17 +106,17 @@
    overflow-y: scroll;
    box-sizing: border-box; }
  .u-table-title {
-    padding: 12px 8px;
+    padding: 12px 16px;
    border-top: 1px solid rgb(193, 199, 208); }
  .u-table-content {
    position: relative; }
  .u-table-footer {
-    padding: 12px 8px;
+    padding: 12px 16px;
    border-bottom: 1px solid rgb(193, 199, 208); }
    .u-table-footer .u-table-scroll {
      overflow-x: hidden; }
  .u-table-footer .u-table {
-    margin: -12px -8px; }
+    margin: -12px -16px; }
  .u-table-placeholder {
    padding: 12px 8px;
    background: #fff;
@ -219,13 +227,18 @@
    .u-table-thead th .bee-table-column-sorter {
      position: relative;
      margin-left: 4px;
-      height: 1em;
+      height: 16px;
      vertical-align: middle;
      text-align: center;
-      display: inline-block; }
+      display: inline-block;
+      margin-top: -3px; }
+      .u-table-thead th .bee-table-column-sorter i {
+        padding: 0px;
+        font-weight: 600;
+        color: #505F79; }
      .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
      .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
-        line-height: 6px;
+        line-height: 16px;
        display: block;
        width: 34px;
        cursor: pointer; }
@ -296,17 +309,18 @@
    position: relative; }
  .u-table-filter-column-filter-icon {
    position: absolute;
-    top: 8px;
-    right: 18px;
-    width: 22px;
-    height: 25px;
-    line-height: 25px;
+    width: 30px;
+    height: 38px;
+    line-height: 38px;
+    right: 12px;
+    top: 1px;
    z-index: 2;
    background: rgb(241, 242, 245);
    text-align: center;
    cursor: pointer; }
    .u-table-filter-column-filter-icon i.uf {
-      padding: 0px; }
+      padding: 0px;
+      color: #505F79; }
  .u-table-filter-column-pop-cont-item {
    margin-top: 8px;
    cursor: pointer; }
@ -329,9 +343,15 @@
    display: none;
    pointer-events: none; }
  .u-table .u-checkbox {
-    height: 16px;
-    line-height: 16px;
+    height: 14px;
+    line-height: 14px;
    margin: 0px; }
+    .u-table .u-checkbox .u-checkbox-label {
+      line-height: 14px;
+      padding-left: 16px; }
+      .u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
+        width: 14px;
+        height: 14px; }

 .u-table:focus {
  outline: none;
@ -521,16 +541,16 @@
 .u-filter-dropdown-menu-wrap {
  z-index: 1800; }
  .u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
-    line-height: 28px;
-    height: 28px;
+    line-height: 26px;
+    height: 26px;
    padding: 0px 16px 0 16px;
    cursor: pointer; }

 .filter-wrap .u-form-control {
-  height: 28px; }
+  height: 26px; }

 .filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
-  height: 28px; }
+  height: 26px; }

 .u-row-hover {
  position: absolute;
--- a/build/lib/bigData.js
+++ b/build/lib/bigData.js
@ -490,6 +490,7 @@ function bigData(Table) {
      if (!_this.props.expandedRowKeys) {
        if (expandState) {
          expandedRowKeys.push(rowKey);
+          _this4.setState({ needRender: !needRender });
        } else {
          var _index = -1;
          expandedRowKeys.forEach(function (r, i) {
--- a/demo/TableDemo.scss
+++ b/demo/TableDemo.scss
@ -1,20 +1,20 @@
-// @import "../node_modules/tinper-bee-core/scss/index.scss";
-// @import "../node_modules/bee-panel/src/Panel.scss";
-// @import "../node_modules/bee-layout/src/Layout.scss";
-// @import "../node_modules/bee-button/src/Button.scss";
-// @import "../node_modules/bee-transition/src/Transition.scss";
-// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
-// @import "../node_modules/bee-form-control/src/FormControl.scss";
-// @import "../node_modules/bee-pagination/src/Pagination.scss";
-// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
-// @import "../node_modules/bee-select/src/Select.scss";
+@import "../node_modules/tinper-bee-core/scss/index.scss";
+@import "../node_modules/bee-panel/src/Panel.scss";
+@import "../node_modules/bee-layout/src/Layout.scss";
+@import "../node_modules/bee-button/src/Button.scss";
+@import "../node_modules/bee-transition/src/Transition.scss";
+@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
+@import "../node_modules/bee-form-control/src/FormControl.scss";
+@import "../node_modules/bee-pagination/src/Pagination.scss";
+@import "../node_modules/bee-checkbox/src/Checkbox.scss";
+@import "../node_modules/bee-select/src/Select.scss";
 // @import "../node_modules/bee-form/src/Form.scss";
-// @import "../node_modules/bee-popover/src/Popover.scss";
-// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
-// @import "../node_modules/bee-message/build/Message.css";
-// @import "../node_modules/bee-dropdown/build/Dropdown.css";
-// @import "../node_modules/bee-input-number/build/InputNumber.css";
-// @import "../node_modules/bee-modal/build/Modal.css";
+@import "../node_modules/bee-popover/src/Popover.scss";
+@import "../node_modules/bee-tooltip/src/Tooltip.scss";
+@import "../node_modules/bee-message/build/Message.css";
+@import "../node_modules/bee-dropdown/build/Dropdown.css";
+@import "../node_modules/bee-input-number/build/InputNumber.css";
+@import "../node_modules/bee-modal/build/Modal.css";
@import "../src/Table.scss";


@ -33,3 +33,10 @@
  }

 }
+.opt-btns .u-button{
+  color: #fff;
+  background: #505F79;
+  &:hover, &:active{
+    background: #344563;
+  }
+}
--- a/demo/demolist/.DS_Store
+++ b/demo/demolist/.DS_Store
--- a/demo/demolist/Demo01.js
+++ b/demo/demolist/Demo01.js
@ -1,8 +1,8 @@
 /**
 *
 * @title 基本表格
-* 【Tooltip】
-* @description 鼠标hover行时呼出操作按钮
+* @parent 基础 Basic
+* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
 */

 import React, { Component } from "react";
@ -11,14 +11,15 @@ import Table from "../../src";

 const columns = [
  {
-    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
+    title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
    fixed:'left',
+    textAlign:'center',
    render: (text, record, index) => {
      return (
        <Tooltip inverse overlay={text}>
          <span tootip={text} style={{
            display: "inline-block",
-            width: "60px",
+            width: "80px",
            textOverflow: "ellipsis",
            overflow: "hidden",
            whiteSpace: "nowrap",
@ -28,14 +29,15 @@ const columns = [
      );
    }
  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
+  { title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
+  { title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
 ];

 const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];

 class Demo01 extends Component {
@ -66,8 +68,7 @@ class Demo01 extends Component {
          columns={columns}
          data={data}
          parentNodeId='parent'
-          height={40}
-          headerHeight={40}
+          bordered = {true}
          hoverContent={this.getHoverContent}
          onRowHover={this.onRowHover}
        />
--- a/demo/demolist/Demo02.js
+++ b/demo/demolist/Demo02.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 默认无数据展示
+* @parent 基础 Basic
 * @description 无数据时显示效果展示（可自定义）
 *
 */
@ -10,30 +11,29 @@ import React, { Component } from 'react';
 import Table from '../../src';
 import Icon from 'bee-icon';

-
 const columns02 = [
    {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
+      title: "员工编号",
+      dataIndex: "num",
+      key: "num",
      width: "40%"
    },
    {
-      title: "Age",
-      dataIndex: "age",
-      key: "age",
+      title: "员工姓名",
+      dataIndex: "name",
+      key: "name",
      width: "30%"
    },
    {
-      title: "Address",
-      dataIndex: "address",
-      key: "address"
+      title: "部门",
+      dataIndex: "department",
+      key: "department"
    }
-  ];
+];
  
-  const data02 = [];
+const data02 = [];

-  const emptyFunc = () => <Icon type="uf-nodata"></Icon>
+const emptyFunc = () => <Icon type="uf-nodata"></Icon>
  
 class Demo02 extends Component {
  render() {
--- a/demo/demolist/Demo02.scss
+++ b/demo/demolist/Demo02.scss
@ -1,5 +1,6 @@
 .demo02 {
    .u-table-placeholder i{
        font-size: 60px;
+        line-height: 60px;
    }
 }
--- a/demo/demolist/Demo03.js
+++ b/demo/demolist/Demo03.js
@ -1,7 +1,8 @@
 /**
 *
 * @title 固定表头
-* @description 设置`scroll.y`指定滚动区域的高度，添加纵向滚动条，达到固定表头效果
+* @parent 基础 Basic
+* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
 */

 import React, { Component } from 'react';
@ -9,63 +10,167 @@ import Table from '../../src';

 const columns03 = [
  {
-    title: "Full Name",
-    width: 100,
-    dataIndex: "name",
-    key: "name"
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      width: 80, 
+      render(text, record, index) {
+          return index + 1;
+      }
  },
-  { title: "Age", width: 100, dataIndex: "age", key: "age"},
-  { title: "Address", dataIndex: "address", key: "1" }
+  {
+      title: "订单编号",
+      dataIndex: "orderCode",
+      key: "orderCode",
+      width: 200, 
+  },
+  {
+      title: "供应商名称",
+      dataIndex: "supplierName",
+      key: "supplierName",
+      width: 200
+  },
+  {
+      title: "类型",
+      dataIndex: "type_name",
+      key: "type_name",
+      width: 200
+  },
+  {
+      title: "采购组织",
+      dataIndex: "purchasing",
+      key: "purchasing",
+      width: 200
+  },
+  {
+      title: "采购组",
+      dataIndex: "purchasingGroup",
+      key: "purchasingGroup",
+      width: 200
+  },
+  {
+      title: "凭证日期",
+      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
+  }
 ];

 const data03 = [
  { 
-    key: "1",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
+    orderCode:"NU0391025", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
  }, 
  { 
-    key: "2",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
  },
  { 
-    key: "3",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "3"
  },
  { 
-    key: "4",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },{
-    key: "11",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
+    orderCode:"NU0391028", 
+    supplierName: "xx供应商",
+    type_name: "4",
+    purchasing:'组织c', 
+    purchasingGroup:"cc",
+    voucherDate:"2019年03月01日",
+    approvalState_name:"未审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "4"
  },
  { 
-    key: "12",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+    orderCode:"NU0391029", 
+    supplierName: "xx供应商",
+    type_name: "5",
+    purchasing:'组织d', 
+    purchasingGroup:"ss",
+    voucherDate:"2019年02月14日",
+    approvalState_name:"未审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "5"
  },
  { 
-    key: "13",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+    orderCode:"NU0391030", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织e', 
+    purchasingGroup:"zz",
+    voucherDate:"2019年02月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "6"
  },
  { 
-    key: "14",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  }
+    orderCode:"NU0391031", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织f', 
+    purchasingGroup:"qq",
+    voucherDate:"2019年01月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "7"
+  },
+  { 
+    orderCode:"NU0391032", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织g', 
+    purchasingGroup:"pp",
+    voucherDate:"2019年01月31日",
+    approvalState_name:"未审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "8"
+  },
 ];

 class Demo03 extends Component {
--- a/demo/demolist/Demo04.js
+++ b/demo/demolist/Demo04.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 隔行换色
+* @parent 基础 Basic
 * @description 可自定义斑马线颜色
 *
 */
@ -11,13 +12,13 @@ import Table from '../../src';

 const columns04 = [
  {
-    title: "Full Name",
+    title: "员工姓名",
    width: 100,
    dataIndex: "name",
    key: "name"
  },
-  { title: "Age", width: 100, dataIndex: "age", key: "age"},
-  { title: "Address", dataIndex: "address", key: "1" }
+  { title: "年龄", width: 100, dataIndex: "age", key: "age"},
+  { title: "住址", dataIndex: "address", key: "1" }
 ];

 const data04 = [
@ -72,7 +73,10 @@ const data04 = [

 class Demo04 extends Component {
  render() {
-    return <Table className="demo04" columns={columns04} data={data04} />;
+    return <Table 
+            className="demo04" 
+            columns={columns04} 
+            data={data04} />
  }
 }

--- a/demo/demolist/Demo05.js
+++ b/demo/demolist/Demo05.js
@ -1,38 +1,26 @@
 /**
 *
 * @title 表格 Loading 加载
+* @parent 基础 Basic
 * @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
 *
 */

 import React, { Component } from "react";
 import Table from "../../src";
-import {Button,Popconfirm} from "tinper-bee";
+import {Button,Tooltip} from "tinper-bee";

 const columns05 = [
-  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
-  {
-    title: "操作",
-    dataIndex: "d",
-    key: "d",
-    render(text, record, index) {
-      return (
-        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-          <a href="javascript:;">
-            一些操作
-          </a>
-        </Popconfirm>
-      );
-    }
-  }
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",fixed:'left'},
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
 ];

 const data05 = [
-  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];

 class Demo05 extends Component {
@ -59,8 +47,6 @@ class Demo05 extends Component {
        <Table
          columns={columns05}
          data={data05}
-          title={currentData => <div>标题: 这是一个标题</div>}
-          footer={currentData => <div>表尾: 我是小尾巴</div>}
          // loading={this.state.loading}或者是boolean
          loading={{show:this.state.loading}}
        />
--- a/demo/demolist/Demo101.js
+++ b/demo/demolist/Demo101.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 嵌套子表格
+* @parent 扩展行 Expanded Row
 * @description 通过expandedRowRender参数来实现子表格
 *
 */
@ -118,8 +119,6 @@ class Demo16 extends Component {
        scroll={{x:true}}
        dragborder={true} 
        draggable={true} 
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
      />
    );
  }
--- a/demo/demolist/Demo102.js
+++ b/demo/demolist/Demo102.js
@ -1,6 +1,7 @@
 /**
 *
-* @title 层级树型展示
+* @title 树型表格数据展示
+* @parent 扩展行 Expanded Row
 * @description 通过在data中配置children数据，来自动生成树形表格
 *
 */
--- a/demo/demolist/Demo103.js
+++ b/demo/demolist/Demo103.js
@ -1,7 +1,8 @@
 /**
 *
 * @title 选中行颜色、自定义表格标题和表尾
-* @description
+* @parent 扩展行 Expanded Row
+* @description 选中行的样式可自定义
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo104.js
+++ b/demo/demolist/Demo104.js
@ -1,84 +1,74 @@
 /**
 *
-* @title 自定义行高
-* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
+* @title 紧凑型、宽松型
+* @parent 扩展行 Expanded Row
+* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
 */

 import React, { Component } from "react";
-import {Button,Tooltip} from "tinper-bee";
+import {Button,Tooltip,Tag} from "tinper-bee";
 import Table from "../../src";

 const columns = [
-  {
-    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
-    fixed:'left',
-    render: (text, record, index) => {
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "inline-block",
-            width: "60px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "middle",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
+    { title: "订单编号", dataIndex: "orderNum", key: "orderNum", width: 100 },
+    { title: "采购组织", dataIndex: "org", key: "org", width: 200 },
+    { 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: "submitter", key: "submitter", width: 100 },
+    { title: "单位", dataIndex: "unit", key: "unit", width: 100 },
+    { title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
 ];

 const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+    { 
+        orderNum: "NU0391025", 
+        org: "用友网络科技股份有限公司", 
+        supplier: "xx供应商", 
+        orderDate: '2018年03月18日', 
+        quantity: '100.00', 
+        status: '错误', 
+        submitter: '小张', 
+        unit: 'pc', 
+        sum:'8,487.00', 
+        key: "1" 
+    },
+    { 
+        orderNum: "NU0391026", 
+        org: "用友网络科技股份有限公司", 
+        supplier: "xx供应商", 
+        orderDate: '2018年02月05日', 
+        quantity: '91.00', 
+        status: '正常', 
+        submitter: '小红', 
+        unit: 'pc', 
+        sum:'675.00', 
+        key: "2" 
+    },
+    { 
+        orderNum: "NU0391027", 
+        org: "用友网络科技股份有限公司", 
+        supplier: "xx供应商", 
+        orderDate: '2018年07月01日', 
+        quantity: '98.00', 
+        status: '异常', 
+        submitter: '小李', 
+        unit: 'pc', 
+        sum:'1,531.00', 
+        key: "3" 
+    }
 ];

 class Demo1 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>
-  }
-
  render() {
    return (
-   
-        <Table
-          columns={columns}
-          data={data}
-          parentNodeId='parent'
-          height={40}
-          headerHeight={40}
-          hoverContent={this.getHoverContent}
-          onRowHover={this.onRowHover}
-          onRowClick={(record, index, indent) => {
-            this.setState({
-              selectedRowIndex: index
-            });
-          }}
-        />
-
-     
+        <div>
+            <h5>紧凑型表格</h5>
+            <Table columns={columns} data={data} size="sm" />
+            <h5>宽松型表格</h5>
+            <Table columns={columns} data={data} size="lg" />
+        </div>
    );
  }
 }
--- a/demo/demolist/Demo105.js
+++ b/demo/demolist/Demo105.js
@ -1,122 +1,87 @@
 /**
 *
-* @title 自定义行、列合并
-* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
-*
+* @title 自定义行高
+* @parent 扩展行 Expanded Row
+* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
 */

 import React, { Component } from "react";
+import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";

-const renderContent = (value, row, index) => {
-  const obj = {
-    children: value,
-    props: {},
-  };
-  if (index === 4) {
-    obj.props.colSpan = 0;
+const columns = [
+  {
+    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
+    fixed:'left',
+    render: (text, record, index) => {
+      return (
+        <Tooltip inverse overlay={text}>
+          <span tootip={text} style={{
+            display: "inline-block",
+            width: "60px",
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            verticalAlign: "middle",
+          }}>{text}</span>
+        </Tooltip>
+      );
    }
-  return obj;
-};
-
-const columns = [{
-  title: 'Name',
-  key: "name",
-  dataIndex: 'name',
-  render: (text, row, index) => {
-    if (index < 4) {
-      return <a href="#">{text}</a>;
-    }
-    return {
-      children: <a href="#">{text}</a>,
-      props: {
-        colSpan: 5,
  },
-    };
-  },
-}, {
-  title: 'Age',
-  key: "Age",
-  dataIndex: 'age',
-  render: renderContent,
-}, {
-  title: 'Home phone',
-  colSpan: 2,
-  key: "tel",
-  dataIndex: 'tel',
-  render: (value, row, index) => {
-    const obj = {
-      children: value,
-      props: {},
-    };
-    if (index === 2) {
-      obj.props.rowSpan = 2;
-    }
-    if (index === 3) {
-      obj.props.rowSpan = 0;
-    }
-    if (index === 4) {
-      obj.props.colSpan = 0;
-    }
-    return obj;
-  },
-}, {
-  title: 'Phone',
-  colSpan: 0,
-  key: "phone",
-  dataIndex: 'phone',
-  render: renderContent,
-}, {
-  title: 'Address',
-  key: "address",
-  dataIndex: 'address',
-  render: renderContent,
-}];
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
+];

-const data = [{
-  key: '1',
-  name: 'John Brown',
-  age: 32,
-  tel: '0571-22098909',
-  phone: 18889898989,
-  address: 'New York No. 1 Lake Park',
-}, {
-  key: '2',
-  name: 'Jim Green',
-  tel: '0571-22098333',
-  phone: 18889898888,
-  age: 42,
-  address: 'London No. 1 Lake Park',
-}, {
-  key: '3',
-  name: 'Joe Black',
-  age: 32,
-  tel: '0575-22098909',
-  phone: 18900010002,
-  address: 'Sidney No. 1 Lake Park',
-}, {
-  key: '4',
-  name: 'Jim Red',
-  age: 18,
-  tel: '0575-22098909',
-  phone: 18900010002,
-  address: 'London No. 2 Lake Park',
-}, {
-  key: '5',
-  name: 'Jake White',
-  age: 18,
-  tel: '0575-22098909',
-  phone: 18900010002,
-  address: 'Dublin No. 2 Lake Park',
-}];
+const data = [
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
+  { a: "郭靖", b: "男", c: 25, key: "3" }
+];
+
+class Demo1 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 Demo15 extends Component {
  render() {
    return (
-       <Table columns={columns} data={data}/>
+   
+        <Table
+          columns={columns}
+          data={data}
+          parentNodeId='parent'
+          height={40}
+          headerHeight={40}
+          hoverContent={this.getHoverContent}
+          onRowHover={this.onRowHover}
+          onRowClick={(record, index, indent) => {
+            this.setState({
+              selectedRowIndex: index
+            });
+          }}
+        />
+
+     
    );
  }
 }

-
-export default Demo15;
+export default Demo1;
--- a/demo/demolist/Demo106.js
+++ b/demo/demolist/Demo106.js
@ -0,0 +1,110 @@
+/**
+*
+* @title 图片在表格中的展示
+* @parent 扩展行 Expanded Row
+* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
+*/
+
+import React, { Component } from "react";
+import {Button,Tooltip} from "tinper-bee";
+import Table from "../../src";
+
+const columns = [
+    {
+        title: "序号",
+        dataIndex: "index",
+        key: "index",
+        width: 80,
+        render(text, record, index) {
+            return index + 1;
+        }
+    },
+    {
+        title: "组织部门",
+        dataIndex: "orgDept",
+        key: "orgDept",
+        width: 100,
+    },
+    {
+        title: "设施管理部门",
+        dataIndex: "facilityManageUnit",
+        key: "facilityManageUnit",
+        width: 150,
+    },
+    {
+        title: "案卷编号",
+        dataIndex: "docketnum",
+        key: "docketnum",
+        width: 100,
+    },
+    {
+        title: "数量",
+        dataIndex: "num",
+        key: "num",
+        width: 100,
+    },
+    {
+        title: "首次发现时间",
+        dataIndex: "discoveryTime",
+        key: "discoveryTime",
+        width: 150,
+    },
+    {
+        title: "实际修复时间",
+        dataIndex: "repairTime",
+        key: "repairTime",
+        width: 150,
+    },
+    {
+        title: "图样",
+        dataIndex: "picture",
+        key: "picture",
+        render(text, record, index) {
+            return <img style={{height:'50px'}} src={text} alt="Picture"/>
+        }
+    }
+];
+
+const data = [
+  { key: "1", orgDept: "组织1", facilityManageUnit: "部门1", docketnum: 41, num: "1", discoveryTime: "2018-10-17", repairTime: "2018-10-30", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg"},
+  { key: "2", orgDept: "组织2", facilityManageUnit: "部门2", docketnum: 30, num: "2", discoveryTime: "2019-01-15", repairTime: "2019-01-20", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg"},
+  { 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>
+  }
+
+  render() {
+    return (
+        <Table
+          columns={columns}
+          data={data}
+          parentNodeId='parent'
+          hoverContent={this.getHoverContent}
+          onRowHover={this.onRowHover}
+        />
+    );
+  }
+}
+
+export default Demo105;
--- a/demo/demolist/Demo107.js
+++ b/demo/demolist/Demo107.js
@ -0,0 +1,123 @@
+/**
+*
+* @title 自定义行、列合并
+* @parent 扩展行 Expanded Row
+* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
+*
+*/
+
+import React, { Component } from "react";
+import Table from "../../src";
+
+const renderContent = (value, row, index) => {
+  const obj = {
+    children: value,
+    props: {},
+  };
+  if (index === 4) {
+    obj.props.colSpan = 0;
+  }
+  return obj;
+};
+
+const columns = [{
+  title: 'Name',
+  key: "name",
+  dataIndex: 'name',
+  render: (text, row, index) => {
+    if (index < 4) {
+      return <a href="#">{text}</a>;
+    }
+    return {
+      children: <a href="#">{text}</a>,
+      props: {
+        colSpan: 5,
+      },
+    };
+  },
+}, {
+  title: 'Age',
+  key: "Age",
+  dataIndex: 'age',
+  render: renderContent,
+}, {
+  title: 'Home phone',
+  colSpan: 2,
+  key: "tel",
+  dataIndex: 'tel',
+  render: (value, row, index) => {
+    const obj = {
+      children: value,
+      props: {},
+    };
+    if (index === 2) {
+      obj.props.rowSpan = 2;
+    }
+    if (index === 3) {
+      obj.props.rowSpan = 0;
+    }
+    if (index === 4) {
+      obj.props.colSpan = 0;
+    }
+    return obj;
+  },
+}, {
+  title: 'Phone',
+  colSpan: 0,
+  key: "phone",
+  dataIndex: 'phone',
+  render: renderContent,
+}, {
+  title: 'Address',
+  key: "address",
+  dataIndex: 'address',
+  render: renderContent,
+}];
+
+const data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  tel: '0571-22098909',
+  phone: 18889898989,
+  address: 'New York No. 1 Lake Park',
+}, {
+  key: '2',
+  name: 'Jim Green',
+  tel: '0571-22098333',
+  phone: 18889898888,
+  age: 42,
+  address: 'London No. 1 Lake Park',
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  tel: '0575-22098909',
+  phone: 18900010002,
+  address: 'Sidney No. 1 Lake Park',
+}, {
+  key: '4',
+  name: 'Jim Red',
+  age: 18,
+  tel: '0575-22098909',
+  phone: 18900010002,
+  address: 'London No. 2 Lake Park',
+}, {
+  key: '5',
+  name: 'Jake White',
+  age: 18,
+  tel: '0575-22098909',
+  phone: 18900010002,
+  address: 'Dublin No. 2 Lake Park',
+}];
+
+class Demo15 extends Component {
+  render() {
+    return (
+       <Table columns={columns} data={data}/>
+    );
+  }
+}
+
+
+export default Demo15;
--- a/demo/demolist/Demo11.js
+++ b/demo/demolist/Demo11.js
@ -1,24 +1,28 @@
 /**
 *
 * @title 横向滚动条
+* @parent 滚动 Scroll View
 * @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
 */

 import React, { Component } from "react";
 import Table from "../../src";

-const columns11 = [
+const columns = [
    {
        title: "序号",
        dataIndex: "index",
        key: "index",
-        width: 200, 
+        width: 100, 
+        render(text, record, index) {
+            return index + 1;
+        }
    },
    {
        title: "订单编号",
        dataIndex: "orderCode",
        key: "orderCode",
-        width: 200, 
+        width: 300, 
    },
    {
        title: "供应商名称",
@ -42,14 +46,13 @@ const columns11 = [
        title: "采购组",
        dataIndex: "purchasingGroup",
        key: "purchasingGroup",
-         width: 300
+        width: 200
    },
    {
        title: "凭证日期",
        dataIndex: "voucherDate",
        key: "voucherDate",
-        width: 200,
-        
+        width: 300,
    },
    {
        title: "审批状态",
@ -67,71 +70,77 @@ const columns11 = [
        title: "关闭状态",
        dataIndex: "closeState_name",
        key: "closeState_name",
-        width: 200
+        width: 100
    }
 ];
  
-const data11 = [
+const data = [
    { 
-        index: 1, 
-        orderCode:"2343", 
-        supplierName: "xxx",
-        type_name: "123",
-        purchasing:'内行', 
-        purchasingGroup:"323",
-        voucherDate:"kkkk",
-        approvalState_name:"vvvv",
-        confirmState_name:"aaaa",
-        closeState_name:"vnnnnn",
+      orderCode:"NU0391025", 
+      supplierName: "xx供应商",
+      type_name: "1",
+      purchasing:'组织c', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年03月18日",
+      approvalState_name:"已审批",
+      confirmState_name:"执行中",
+      closeState_name:"未关闭",
      key: "1"
    }, 
    { 
-      index: 2, 
-      _checked:true,
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
+      orderCode:"NU0391026", 
+      supplierName: "xx供应商",
+      type_name: "2",
+      purchasing:'组织a', 
+      purchasingGroup:"bb",
+      voucherDate:"2018年02月05日",
+      approvalState_name:"已审批",
+      confirmState_name:"待确认",
+      closeState_name:"未关闭",
      key: "2"
    },
    { 
-      index: 3, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      _disabled:true,
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
+      orderCode:"NU0391027", 
+      supplierName: "xx供应商",
+      type_name: "3",
+      purchasing:'组织b', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年07月01日",
+      approvalState_name:"已审批",
+      confirmState_name:"终止",
+      closeState_name:"已关闭",
      key: "3"
    },
    { 
-      index: 4, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
+      orderCode:"NU0391028", 
+      supplierName: "xx供应商",
+      type_name: "4",
+      purchasing:'组织c', 
+      purchasingGroup:"cc",
+      voucherDate:"2019年03月01日",
+      approvalState_name:"未审批",
+      confirmState_name:"待确认",
+      closeState_name:"未关闭",
      key: "4"
    },
+    { 
+      orderCode:"NU0391029", 
+      supplierName: "xx供应商",
+      type_name: "5",
+      purchasing:'组织d', 
+      purchasingGroup:"ss",
+      voucherDate:"2019年02月14日",
+      approvalState_name:"未审批",
+      confirmState_name:"待确认",
+      closeState_name:"未关闭",
+      key: "5"
+    }
 ];

 class Demo11 extends Component {
  render() {
    return (
-        <Table columns={columns11} data={data11} scroll={{x:true}} />
+        <Table columns={columns} data={data} scroll={{ x:true }} />
    );
  }
 }
--- a/demo/demolist/Demo12.js
+++ b/demo/demolist/Demo12.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 纵向滚动条
+* @parent 滚动 Scroll View
 * @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
 */

--- a/demo/demolist/Demo121.js
+++ b/demo/demolist/Demo121.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 多选表格
+* @parent 行操作-选择
 * @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
 *
 */
--- a/demo/demolist/Demo131.js
+++ b/demo/demolist/Demo131.js
@ -1,6 +1,7 @@
 /**
 *
-* @title 滚动加载
+* @title 万行以上数据渲染
+* @parent 无限滚动 Infinite-scroll
 * @description 万行数据渲染
 */

@ -13,7 +14,7 @@ const columns = [
    {
        title:'序号',
        dataIndex:'index',
-        width:'50',
+        width:'60',
        key:'index',
        render:(text,record,index)=>{
            return index
@ -66,7 +67,6 @@ class Demo30 extends Component {
          columns={columns}
          data={data}
          scroll={{y:300}}
-          height={40}
          onRowClick={(record, index, indent) => {
            console.log('currentIndex--'+index);
          }}
--- a/demo/demolist/Demo132.js
+++ b/demo/demolist/Demo132.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 嵌套子表格滚动加载
+* @parent 无限滚动 Infinite-scroll
 * @description 通过expandedRowRender参数来实现子表格
 *
 */
@ -131,8 +132,6 @@ class Demo31 extends Component {
        expandedRowRender={this.expandedRowRender}
        scroll={{y:350}}
        // defaultExpandedRowKeys={[0,1]}
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
      />
    );
  }
--- a/demo/demolist/Demo133.js
+++ b/demo/demolist/Demo133.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 多功能表格滚动加载
+* @parent 无限滚动 Infinite-scroll
 * @description
 */

@ -17,7 +18,7 @@ const columns = [
    {
        title:'序号',
        dataIndex:'index',
-        width:'50',
+        width:'80',
        key:'index',
        render:(text,record,index)=>{
            return index
@ -73,7 +74,6 @@ class Demo32 extends Component {
          data={data}
          parentNodeId='parent'
          scroll={{y:300}}
-          height={40}
          bordered
          onRowClick={(record, index, indent) => {
            this.setState({
--- a/demo/demolist/Demo134.js
+++ b/demo/demolist/Demo134.js
@ -1,10 +1,8 @@
 /**
-*
-* @title 树状表滚动加载
-* 【Tooltip】
+* @title 层级树大数据场景
+* @parent 无限滚动 Infinite-scroll
 * @description
 */
-
 import React, { Component } from "react";
 import {Tooltip} from "tinper-bee";

@ -82,7 +80,7 @@ class Demo34 extends Component {
          data={data}
          parentNodeId='parent'
          scroll={{y:300}}
-          height={40}
+          onExpand={this.onExpand}
          onRowClick={(record, index, indent) => {
            console.log('currentIndex--'+index);
          }}
--- a/demo/demolist/Demo161.js
+++ b/demo/demolist/Demo161.js
@ -1,6 +1,6 @@
 /**
- *
 * @title 表格+分页
+ * @parent 分页 Pagination
 * @description 点击分页联动表格
 */

--- a/demo/demolist/Demo162.js
+++ b/demo/demolist/Demo162.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 表格+搜索
+ * @parent 搜索 search
 * @description 搜索刷新表格数据
 *
 */
--- a/demo/demolist/Demo181.js
+++ b/demo/demolist/Demo181.js
@ -1,96 +0,0 @@
-/**
- *
- * @title 主子表
- * @description 点击主表行，子表联动切换
- *
- */
-
-import React, { Component } from "react";
-import Table from "../../src";
-
-const columns7 = [
-  { title: "班级", dataIndex: "a", key: "a" },
-  { title: "人数", dataIndex: "b", key: "b" },
-  { title: "班主任", dataIndex: "c", key: "c" },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
-  }
-];
-
-const data7 = [
-  { a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
-  { a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
-  { a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
-];
-
-const columns7_1 = [
-  { title: "姓名", dataIndex: "a", key: "a" },
-  { title: "班级", dataIndex: "b", key: "b" },
-  { title: "系别", dataIndex: "c", key: "c" }
-];
-
-class Demo7 extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      children_data: [],
-      selectedRowIndex: -1
-    };
-  }
-
-  rowclick = (record, index) => {
-    if (record.a === "02级一班") {
-      this.setState({
-        children_data: [
-          { a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
-          { a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
-        ],
-        selectedRowIndex: index
-      });
-    } else if (record.a === "03级二班") {
-      this.setState({
-        children_data: [
-          { a: "杨过", b: "03级二班", c: "外语系", key: "1" },
-          { a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
-          { a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
-        ],
-        selectedRowIndex: index
-      });
-    } else if (record.a === "05级三班") {
-      this.setState({
-        children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }],
-        selectedRowIndex: index
-      });
-    }
-  };
-
-  render() {
-    return (
-      <div>
-        <Table
-          columns={columns7}
-          data={data7}
-          onRowClick={this.rowclick}
-          rowClassName={(record,index,indent)=>{
-            if (this.state.selectedRowIndex == index) {
-                return 'selected';
-            } else {
-                return '';
-            }
-          }}
-          title={currentData => <div>标题: 我是主表</div>}
-        />
-        <Table
-          style={{ marginTop: 40 }}
-          columns={columns7_1}
-          data={this.state.children_data}
-          title={currentData => <div>标题: 我是子表</div>}
-        />
-      </div>
-    );
-  }
-}
-
-export default Demo7;
--- a/demo/demolist/Demo21.js
+++ b/demo/demolist/Demo21.js
@ -0,0 +1,62 @@
+/**
+*
+* @title 渲染本地数据
+* @parent 数据操作 Data Opetation
+* @description 可自定义页头和页脚。
+*/
+
+import React, { Component } from "react";
+import {Button,Tooltip} from "tinper-bee";
+import Table from "../../src";
+
+const columns = [
+  {
+    title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
+    fixed:'left',
+    render: (text, record, index) => {
+      return (
+        <Tooltip inverse overlay={text}>
+          <span tootip={text} style={{
+            display: "inline-block",
+            width: "80px",
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            verticalAlign: "middle",
+          }}>{text}</span>
+        </Tooltip>
+      );
+    }
+  },
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
+];
+
+const data = [
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
+];
+class Demo21 extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: data
+    }
+  }
+
+  render() {
+    return (
+        <Table
+          columns={columns}
+          data={data}
+          title={currentData => <div>员工信息统计表</div>}
+          footer={currentData => <div>合计: 共{data.length}条数据</div>}
+        />
+    );
+  }
+}
+
+export default Demo21;
--- a/demo/demolist/Demo22.js
+++ b/demo/demolist/Demo22.js
@ -0,0 +1,75 @@
+/**
+*
+* @title 渲染远程数据
+* @parent 数据操作 Data Opetation
+* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。
+*/
+
+import React, { Component } from "react";
+import {Button} from "tinper-bee";
+import reqwest from 'reqwest';
+import Table from "../../src";
+
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  sorter: true,
+  render: name => `${name.first} ${name.last}`,
+  width: '20%',
+}, {
+  title: 'Gender',
+  dataIndex: 'gender',
+  filters: [
+      { text: 'Male', value: 'male' },
+      { text: 'Female', value: 'female' },
+  ],
+  width: '20%',
+}, {
+  title: 'Email',
+  dataIndex: 'email',
+}];
+
+class Demo22 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: [],
+      loading: false,
+    }
+  }
+
+  fetch = (params = {}) => {
+    console.log('params:', params);
+    this.setState({ loading: true });
+    reqwest({
+      url: 'https://randomuser.me/api',
+      method: 'get',
+      data: {
+        results: 10,
+        ...params,
+      },
+      type: 'json',
+    }).then((data) => {
+      this.setState({
+        loading: false,
+        data: data.results,
+      });
+    });
+  }
+
+  render() {
+    return (
+      <div className="demo22">
+        <Button className="opt-btns" colors="primary" onClick={() => this.fetch()}>点击加载远程数据</Button>
+        <Table
+          columns={columns}
+          data={this.state.data}
+          loading={this.state.loading}
+          scroll={{y:200}}
+        />
+      </div>
+    );
+  }
+}
+
+export default Demo22;
--- a/demo/demolist/Demo22.scss
+++ b/demo/demolist/Demo22.scss
@ -0,0 +1,5 @@
+.demo22{
+    .opt-btns{
+        margin-bottom: 8px;
+    }
+}
--- a/demo/demolist/Demo32.js
+++ b/demo/demolist/Demo32.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 多列表头
+ * @parent 列渲染 Custom Render
 * @description columns[n] 可以内嵌 children，以渲染分组表头。
 * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
 *
--- a/demo/demolist/Demo33.js
+++ b/demo/demolist/Demo33.js
@ -0,0 +1,102 @@
+/**
+*
+* @title 数据关联
+* @parent 列渲染 Custom Render
+* @description 数据行关联自定义菜单显示
+*/
+
+import React, { Component } from 'react';
+import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
+import Table from '../../src';
+import multiSelect from "../../src/lib/multiSelect";
+import sort from "../../src/lib/sort";
+
+const { Item } = Menu;
+
+const data = [
+  { 
+    num:"NU0391025", 
+    name: "aa",
+    sex: "男",
+    dept:'财务二科', 
+    rank:"T1",
+    year:"1",
+    seniority:"1",
+    key: "1"
+  }, 
+  { 
+    num:"NU0391026", 
+    name: "bb",
+    sex: "女",
+    dept:'财务一科', 
+    rank:"M1",
+    year:"1",
+    seniority:"1",
+    key: "2"
+  },
+  { 
+    num:"NU0391027", 
+    name: "dd",
+    sex: "女",
+    dept:'财务一科', 
+    rank:"T2",
+    year:"2",
+    seniority:"2",
+    key: "3"
+  }
+];
+
+const MultiSelectTable = multiSelect(Table, Checkbox);
+const ComplexTable = sort(MultiSelectTable, Icon);
+
+class Demo33 extends Component {
+    constructor(props) {
+        super(props);
+    }
+    getSelectedDataFunc = data => {
+        console.log(data);
+    }
+    onSelect = (item) => {
+        console.log(item);
+    }
+    render() {
+        const menu1 = (
+            <Menu
+                onSelect={this.onSelect}>
+                <Item key="1">模态弹出</Item>
+                <Item key="2">链接跳转</Item>
+                <Item key="3">打开新页</Item>
+            </Menu>);
+        let columns = [
+            {   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)'}}></Icon>
+                        </Dropdown>
+                    )
+                }
+            },
+            { title: "员工编号",dataIndex: "num",key: "num",width: 200 },
+            { title: "员工姓名",dataIndex: "name",key: "name", width: 200},
+            { title: "员工性别",dataIndex: "sex",key: "sex",width: 200 },
+            { title: "部门",dataIndex: "dept",key: "dept",width: 200},
+            { title: "职级",dataIndex: "rank",key: "rank",width: 200},
+            { title: "工龄",dataIndex: "year",key: "year",width: 200},
+            { title: "司龄",dataIndex: "seniority",key: "seniority",width: 200}
+        ];
+        return <ComplexTable 
+                bordered
+                columns={columns} 
+                data={data} 
+                multiSelect={{type: "checkbox"}}
+                getSelectedDataFunc={this.getSelectedDataFunc}
+                />
+    }
+}
+
+export default Demo33; 
--- a/demo/demolist/Demo35.js
+++ b/demo/demolist/Demo35.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 合并列后合计
+ * @parent 列渲染 Custom Render
 * @description 合并标题后的合计,且支持多字段统计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
 *
 */
@ -17,7 +18,7 @@ const columns = [
    title: "Name",
    dataIndex: "name",
    key: "name",
-    width: 100,
+    width: 120,
    fixed: "left"
  },
  {
--- a/demo/demolist/Demo41.js
+++ b/demo/demolist/Demo41.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 编辑态表格
+* @parent 编辑 Editor
 * @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
 *
 */
--- a/demo/demolist/Demo51.js
+++ b/demo/demolist/Demo51.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 左侧固定列
+* @parent 列操作-锁定 Fixed
 * @description 固定列到表格的左侧
 *
 */
--- a/demo/demolist/Demo52.js
+++ b/demo/demolist/Demo52.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 右侧固定列
+* @parent 列操作-锁定 Fixed
 * @description 固定列到表格的右侧
 *
 */
--- a/demo/demolist/Demo53.js
+++ b/demo/demolist/Demo53.js
@ -1,8 +1,8 @@
 /**
 *
 * @title 动态设置列锁定、解除锁定
-* @description 动态设置固、取消固定列
-* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
+* @parent 列操作-锁定 Fixed
+* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
 *
 */
 import React, { Component } from 'react';
@ -11,25 +11,6 @@ import {Icon,Menu,Dropdown} from "tinper-bee";
 import Table from '../../src';

 const { Item } = Menu;
-// const columns24 = [
-//   {
-//     title: "Full Name",
-//     width: 100,
-//     dataIndex: "name",
-//     key: "name",
-//     fixed: "left",
-//   },
-//   { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
-//   { title: "Column 1", dataIndex: "address", key: "1"  },
-//   { title: "Column 2", dataIndex: "address2", key: "2" },
-//   { title: "Column 3", dataIndex: "address", key: "3" },
-//   { title: "Column 4", dataIndex: "address", key: "4" },
-//   { title: "Column 24", dataIndex: "address", key: "24" },
-//   { title: "Column 6", dataIndex: "address", key: "6" },
-//   { title: "Column 7", dataIndex: "address", key: "7" },
-//   { title: "Column 8", dataIndex: "address", key: "8" }
-// ];
-

 const columns24 = [
  {
@ -74,7 +55,7 @@ const columns24 = [
    title: "武功类型",
    dataIndex: "g",
    key: "g",
-    width: 100 
+    width: 150 
  },
  {
    title: "师傅",
@ -106,7 +87,6 @@ class Demo24 extends Component {
    }
  }
  
-  
  onSelect = ({key,item})=>{ 
    console.log(`${key} selected`); //获取key
    let currentObject = item.props.data; //获取选中对象的数据
@ -167,9 +147,11 @@ class Demo24 extends Component {
  render() {
    let {columns} = this.state;
    columns = this.renderColumnsDropdown(columns);
-    return <div className="demo24">
+    return(
+      <div className="demo24">
        <Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
-          </div>;
+      </div>
+    )
  }
 }

--- a/demo/demolist/Demo62.js
+++ b/demo/demolist/Demo62.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 按条件、值过滤
+* @parent 列操作-过滤 Filter
 * @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
 *
 */
--- a/demo/demolist/Demo63.js
+++ b/demo/demolist/Demo63.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 复杂表格中行过滤
+* @parent 列操作-过滤 Filter
 * @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
 *
 */
--- a/demo/demolist/Demo71.js
+++ b/demo/demolist/Demo71.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 列过滤面板
+* @parent 列操作-隐藏 Hide
 * @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
 *
 */
@ -55,22 +56,6 @@ class Demo21 extends Component {
                  title: "武功级别",
                  dataIndex: "d",
                  key: "d"
-                },
-                {
-                  title: "操作",
-                  dataIndex: "e",
-                  key: "e",
-                  render(text, record, index){
-                    return (
-                      <div  title={text} >
-                        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-                          <a href="javascript:;" tooltip={text} >
-                            一些操作
-                          </a>
-                        </Popconfirm>
-                      </div>
-                    );
-                  }
                }
              ]};
  }
--- a/demo/demolist/Demo81.js
+++ b/demo/demolist/Demo81.js
@ -1,5 +1,6 @@
 /**
 * @title 列排序
+* @parent 列操作-排序 Sort
 * @description  column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
 *
 */
--- a/demo/demolist/Demo82.js
+++ b/demo/demolist/Demo82.js
@ -1,6 +1,7 @@
 /**
 * @title 后端列排序
-*
+* @parent 列操作-排序 Sort
+* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序
 */


--- a/demo/demolist/Demo83.js
+++ b/demo/demolist/Demo83.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 多列排序
+ * @parent 列操作-排序 Sort
 * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
 *
 */
--- a/demo/demolist/Demo91.js
+++ b/demo/demolist/Demo91.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 拖拽改变列顺序
+* @parent 列操作-拖拽 Drag
 * @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
 */
 import React, { Component } from 'react';
--- a/demo/demolist/Demo92.js
+++ b/demo/demolist/Demo92.js
@ -1,6 +1,7 @@
 /**
 *
 * @title 拖拽改变列宽度
+* @parent 列操作-拖拽 Drag
 * @description 注：不支持tree结构的表头、合并表头的table
 */
 import React, { Component } from 'react';
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
--- 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
@ -45,7 +45,7 @@ import 'bee-table/build/Table.css';
 | title                  | 表格标题                                     | Function                               | -               |
 | footer                 | 表格尾部                                     | Function                               | -               |
 | emptyText              | 无数据时显示的内容                                | Function                               | () => 'No Data' |
-| scroll                 | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object                                 | {}              |
+| scroll                 | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度 | ` { x: number | true | 百分比 ,  y: number }` | {}     |
 | rowRef                 | 获取行的ref                                  | Function(record, index, indent):string | () => null      |
 | getBodyWrapper         | 添加对table body的包装                         | Function(body)                         | body => body    |
 | expandedRowRender      | 额外的展开行                                   | Function(record, index, indent):node | -               |
@ -66,6 +66,9 @@ import 'bee-table/build/Table.css';
 | hoverContent       | hover某行时，动态渲染行菜单元素，此方法需返回行菜单元素的内容 | Function| 
 | onRowHover       | 行hover时的回调函数 | Function| 
 | heightConsistent       | 当固定列内容高度超出非固定列时，内容互错行，当此属性为true会将高度同步，当行过多时会有性能影响，所以建议非固定高度如果过高时，超出内容可以显示成省略号 | bool|false 
+| height | 自定义表格行高 | number | - |
+| headerHeight | 自定义表头行高 | number | - |
+| size | 表格大小 | `sm | md | lg` | 'md' |

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

--- a/package.json
+++ b/package.json
@ -76,7 +76,9 @@
  "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",
@ -86,8 +88,7 @@
  "react": "^16.6.3",
  "react-addons-test-utils": "^15.5.0",
  "react-dom": "^16.6.3",
-  "tinper-bee": "latest",
-  "bee-pagination": "^2.0.5",
-  "bee-popover": "^2.0.0"
+  "reqwest": "^2.0.5",
+  "tinper-bee": "latest"
 }
 }
--- a/src/Table.js
+++ b/src/Table.js
@ -51,7 +51,8 @@ const propTypes = {
  onFilterClear: PropTypes.func,
  syncHover: PropTypes.bool,
  tabIndex:PropTypes.string,
-  hoverContent:PropTypes.func
+  hoverContent:PropTypes.func,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
 };

 const defaultProps = {
@ -85,7 +86,8 @@ const defaultProps = {
  setRowHeight:()=>{},
  setRowParentIndex:()=>{},
  tabIndex:'0',
-  heightConsistent:false
+  heightConsistent:false,
+  size: 'md'
 };

 class Table extends Component {
@ -158,7 +160,7 @@ class Table extends Component {
    if (this.columnManager.isAnyColumnsFixed()) {
      this.syncFixedTableRowHeight();
      this.resizeEvent = addEventListener(
-        window, 'resize', debounce(this.syncFixedTableRowHeight, 150)
+        window, 'resize', this.resize
      );
    }

@ -231,6 +233,10 @@ class Table extends Component {
    }
  }

+  resize(){
+    debounce(this.syncFixedTableRowHeight, 150);
+    this.computeTableWidth();
+  }
  computeTableWidth() {
    
    //如果用户传了scroll.x按用户传的为主
@ -1198,6 +1204,9 @@ class Table extends Component {
        show: loading,
      };
    }
+    if (props.size) {
+      className += ` ${clsPrefix}-${props.size}`;
+    }

    return (
      <div className={className} style={props.style} ref={el => this.contentTable = el} 
--- a/src/Table.scss
+++ b/src/Table.scss
@ -4,22 +4,23 @@

 $text-color: $font-color-base;
 $font-size-base: 12px;
-$line-height: 1.5;
+$line-height: 1.33;
 // 主题定制border：
 $table-border-color: unquote("rgb(#{$table-border-color-base})");
 // $table-head-background-color: #f7f7f7;
 // $table-head-text-color: #666;
 $vertical-padding: 12px;
-$horizontal-padding: 8px;
+$horizontal-padding: 16px;
 // $table-border-color: #e9e9e9;

 $table-hover-color: #E7F2FC;
 $table-move-in-color: $bg-color-base;
-$checkbox-height:16px;
+$checkbox-height:14px;
 $table-th-bottom-border:#C1C7D0;

-$filter-form-control-height:28px;
+$filter-form-control-height:26px;
 $table-head-font-weight: bold;
+$icon-color:#505F79;
 .u-table {
  font-size: $font-size-base;
  color: $text-color;
@ -51,6 +52,7 @@ $table-head-font-weight: bold;
    font-weight: $table-head-font-weight;
    text-align: left;
    // transition: background 0.3s ease;
+    line-height: 16px;
    &[colspan] {
      text-align: center;
    }
@ -61,6 +63,7 @@ $table-head-font-weight: bold;

  td {
    border-bottom: 1px solid $table-border-color;
+    line-height: $line-height;
    a{
      color: #2196F3;
      &:hover{
@ -105,6 +108,22 @@ $table-head-font-weight: bold;
  td {
    padding: $vertical-padding $horizontal-padding;
    word-break: break-all;
+    &.text-center{
+      text-align: center;
+    }
+    &.text-right{
+      text-align: right;
+    }
+  }
+  &-sm {
+    td {
+      padding: 8px $horizontal-padding;
+    }
+  }
+  &-lg {
+    td {
+      padding: 16px $horizontal-padding;
+    }
  }
  tr {
    
@ -115,6 +134,9 @@ $table-head-font-weight: bold;
        .filterContext{
          height: 35px;
        }
+        .u-select-selection--single{
+          height: 26px;
+        }
      }
    }
  }
@ -166,7 +188,7 @@ $table-head-font-weight: bold;
  }

  &.fixed-height td {
-    padding: 0px 8px;
+    padding: 0px $horizontal-padding;
  }

  &-fixed-header &-body {
@ -389,14 +411,20 @@ $table-head-font-weight: bold;
      .bee-table-column-sorter {
        position: relative;
        margin-left: 4px;
-        height: 1em;
+        height: 16px;
        vertical-align: middle;
        text-align: center;
        display: inline-block;
+        margin-top: -3px;
+        i{
+          padding: 0px;
+          font-weight: 600;
+          color: $icon-color;
+        }
       
        & > .bee-table-column-sorter-down,
        & > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {
-          line-height: 6px;
+          line-height: 16px;
          display: block;
          width: 34px;
          cursor: pointer;
@ -444,6 +472,7 @@ $table-head-font-weight: bold;
    }
    .th-drag:hover{
      background: $hover-bg-color-base;
+
    }
    //为了区分是拖拽宽度还是交换列，先注释上面了
    // .th-drag:hover{
@ -512,17 +541,18 @@ $table-head-font-weight: bold;
    }
    &-filter-icon{
      position: absolute;
-      top: 8px;
-      right: 18px;
-      width: 22px;
-      height: 25px;
-      line-height: 25px;
+      width: 30px;
+      height: 38px ;
+      line-height: 38px;
+      right: 12px ;
+      top:1px ;
      z-index: 2;
      background: $table-head-background-color;
      text-align: center;
      cursor: pointer;
      i.uf{
        padding: 0px;
+        color: $icon-color;
      }
    }
    &-pop-cont-item{
@ -561,6 +591,14 @@ $table-head-font-weight: bold;
    height: $checkbox-height;
    line-height:  $checkbox-height;
    margin:0px;
+    .u-checkbox-label{
+      line-height:  $checkbox-height;
+      padding-left: 16px;
+      &:before,&:after {
+        width:  $checkbox-height;
+        height:  $checkbox-height;
+      }
+    }
  }
 }
 .u-table:focus{
--- a/src/lib/bigData.js
+++ b/src/lib/bigData.js
@ -390,7 +390,7 @@ export default function bigData(Table) {
      if(!_this.props.expandedRowKeys){
        if(expandState){
          expandedRowKeys.push(rowKey);
-          
+          this.setState({ needRender: !needRender });
         }else{
           let index = -1;
           expandedRowKeys.forEach((r, i) => {
--- a/src/lib/multiSelect.js
+++ b/src/lib/multiSelect.js
@ -67,7 +67,7 @@ export default function multiSelect(Table, Checkbox) {
      let count = 0;
      let disabledCount = 0;
      data.forEach(da=>{
-        if(da._checked){
+        if(da._checked && !da._disabled){
          count ++;
        }
        if(da._disabled){
@ -175,7 +175,7 @@ export default function multiSelect(Table, Checkbox) {
          key: "checkbox",
          dataIndex: "checkbox",
         fixed:"left",
-          width: 50, 
+          width: 60, 
          render: (text, record, index) => {
            let attr = {};
            record._disabled?attr.disabled = record._disabled:"";