修改示例

2019-04-23 20:11:38 +08:00 · 2019-04-23 20:11:38 +08:00 · 13b42354be
parent 0b2cdee8a1
commit 13b42354be
49 changed files with 932 additions and 646 deletions
--- a/demo/demolist/Demo0101.js
+++ b/demo/demolist/Demo0101.js
@ -2,7 +2,8 @@
 *
 * @title 基本表格
 * @parent 基础 Basic
-* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
+* @description 单元格数据过长时，可结合Tooltip组件使用。
+* demo0101
 */

 import React, { Component } from "react";
@ -11,9 +12,8 @@ import Table from "../../src";

 const columns = [
  {
-    title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
+    title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
    fixed:'left',
-    textAlign:'center',
    render: (text, record, index) => {
      return (
        <Tooltip inverse overlay={text}>
@ -29,15 +29,16 @@ const columns = [
      );
    }
  },
-  { 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' }
+  { 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: "财务二科", key: "1" },
-  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
-  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
+  { 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" }
 ];

 class Demo01 extends Component {
@ -53,24 +54,11 @@ class Demo01 extends Component {
    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'
-          bordered = {true}
-          hoverContent={this.getHoverContent}
-          onRowHover={this.onRowHover}
        />
    );
  }
--- a/demo/demolist/Demo0102.js
+++ b/demo/demolist/Demo0102.js
@ -2,8 +2,8 @@
 *
 * @title 默认无数据展示
 * @parent 基础 Basic
-* @description 无数据时显示效果展示（可自定义）
-*
+* @description 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。
+* demo0102
 */


@ -33,11 +33,18 @@ const columns02 = [
  
 const data02 = [];

-const emptyFunc = () => <Icon type="uf-nodata"></Icon>
+// 在此自定义无数据时的展示内容
+const emptyFunc = () => 'No Data';
  
 class Demo02 extends Component {
  render() {
-    return <Table className="demo02" columns={columns02} data={data02} emptyText={emptyFunc} />;
+    return (
+      <Table 
+      columns={columns02} 
+      data={data02} 
+      // emptyText={emptyFunc} 
+      />
+    )
  }
 }

--- a/demo/demolist/Demo0102.scss
+++ b/demo/demolist/Demo0102.scss
@ -1,6 +0,0 @@
-.demo02 {
-    .u-table-placeholder i{
-        font-size: 60px;
-        line-height: 60px;
-    }
-}
--- a/demo/demolist/Demo0103.js
+++ b/demo/demolist/Demo0103.js
@ -3,6 +3,7 @@
 * @title 固定表头
 * @parent 基础 Basic
 * @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
+* demo0103
 */

 import React, { Component } from 'react';
--- a/demo/demolist/Demo0104.js
+++ b/demo/demolist/Demo0104.js
@ -3,7 +3,7 @@
 * @title 隔行换色
 * @parent 基础 Basic
 * @description 可自定义斑马线颜色
-*
+* demo0104
 */


@ -11,64 +11,92 @@ import React, { Component } from 'react';
 import Table from '../../src';

 const columns04 = [
-  {
-    title: "员工姓名",
-    width: 100,
-    dataIndex: "name",
-    key: "name"
+  {title: "序号",dataIndex: "index",key: "index",width: 80, 
+      render(text, record, index) {
+          return index + 1;
+      }
  },
-  { title: "年龄", width: 100, dataIndex: "age", key: "age"},
-  { title: "住址", 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}
 ];

 const data04 = [
-  {
-    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日",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    key: "2"
  },
-  {
-    key: "2",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+  { 
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    key: "3"
  },
-  {
-    key: "3",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+  { 
+    orderCode:"NU0391028", 
+    supplierName: "xx供应商",
+    type_name: "4",
+    purchasing:'组织c', 
+    purchasingGroup:"cc",
+    voucherDate:"2019年03月01日",
+    key: "4"
  },
-  {
-    key: "4",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },{
-    key: "11",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
+  { 
+    orderCode:"NU0391029", 
+    supplierName: "xx供应商",
+    type_name: "5",
+    purchasing:'组织d', 
+    purchasingGroup:"ss",
+    voucherDate:"2019年02月14日",
+    key: "5"
  },
-  {
-    key: "12",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+  { 
+    orderCode:"NU0391030", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织e', 
+    purchasingGroup:"zz",
+    voucherDate:"2019年02月18日",
+    key: "6"
  },
-  {
-    key: "13",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+  { 
+    orderCode:"NU0391031", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织f', 
+    purchasingGroup:"qq",
+    voucherDate:"2019年01月01日",
+    key: "7"
+  },
+  { 
+    orderCode:"NU0391032", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织g', 
+    purchasingGroup:"pp",
+    voucherDate:"2019年01月31日",
+    key: "8"
  },
-  {
-    key: "14",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  }
 ];

 class Demo04 extends Component {
--- a/demo/demolist/Demo0105.js
+++ b/demo/demolist/Demo0105.js
@ -3,7 +3,7 @@
 * @title 表格 Loading 加载
 * @parent 基础 Basic
 * @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
-*
+* demo0105
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo0106.js
+++ b/demo/demolist/Demo0106.js
@ -0,0 +1,69 @@
+/**
+*
+* @title 单元格内容居中
+* @parent 基础 Basic
+* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。
+* demo0106
+*/
+
+import React, { Component } from "react";
+import {Button,Tooltip} from "tinper-bee";
+import Table from "../../src";
+
+const columns = [
+  {
+    title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
+    fixed:'left',
+    textAlign:'center',
+    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:100,textAlign:'center'},
+  { title: "性别", dataIndex: "c", key: "c", width: 100,textAlign:'center'},
+  { title: "部门", dataIndex: "d", key: "d", width: 100,textAlign:'center' },
+  { title: "职级", dataIndex: "e", key: "e", width: 100,textAlign:'center' }
+];
+
+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" }
+];
+
+class Demo06 extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: data
+    }
+  }
+  handleClick = () => {
+    console.log('这是第' , this.currentIndex , '行');
+    console.log('内容：' , this.currentRecord);
+  }
+
+  render() {
+    return (
+        <Table
+          columns={columns}
+          data={data}
+          bordered
+        />
+    );
+  }
+}
+
+export default Demo06;
--- a/demo/demolist/Demo0201.js
+++ b/demo/demolist/Demo0201.js
@ -3,6 +3,7 @@
 * @title 横向滚动条
 * @parent 滚动 Scroll View
 * @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
+* demo0201
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo0202.js
+++ b/demo/demolist/Demo0202.js
@ -3,75 +3,104 @@
 * @title 纵向滚动条
 * @parent 滚动 Scroll View
 * @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
+* demo0202
 */

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

-const columns12 = [
-    {
-      title: "Full Name",
-      width: 100,
-      dataIndex: "name",
-      key: "name"
+const columns = [
+    {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}
 ];
-
-const data12 = [
-    {
-        key: "1",
-        name: "John Brown",
-        age: 32,
-        address: "New York Park"
+  
+const data = [
+    { 
+      orderCode:"NU0391025", 
+      supplierName: "xx供应商",
+      type_name: "1",
+      purchasing:'组织c', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年03月18日",
+      key: "1"
+    }, 
+    { 
+      orderCode:"NU0391026", 
+      supplierName: "xx供应商",
+      type_name: "2",
+      purchasing:'组织a', 
+      purchasingGroup:"bb",
+      voucherDate:"2018年02月05日",
+      key: "2"
    },
-    {
-        key: "2",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
+    { 
+      orderCode:"NU0391027", 
+      supplierName: "xx供应商",
+      type_name: "3",
+      purchasing:'组织b', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年07月01日",
+      key: "3"
    },
-    {
-        key: "3",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
+    { 
+      orderCode:"NU0391028", 
+      supplierName: "xx供应商",
+      type_name: "4",
+      purchasing:'组织c', 
+      purchasingGroup:"cc",
+      voucherDate:"2019年03月01日",
+      key: "4"
    },
-    {
-        key: "4",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
-    },{
-        key: "11",
-        name: "John Brown",
-        age: 32,
-        address: "New York Park"
+    { 
+      orderCode:"NU0391029", 
+      supplierName: "xx供应商",
+      type_name: "5",
+      purchasing:'组织d', 
+      purchasingGroup:"ss",
+      voucherDate:"2019年02月14日",
+      key: "5"
    },
-    {
-        key: "12",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
+    { 
+      orderCode:"NU0391030", 
+      supplierName: "xx供应商",
+      type_name: "1",
+      purchasing:'组织e', 
+      purchasingGroup:"zz",
+      voucherDate:"2019年02月18日",
+      key: "6"
    },
-    {
-        key: "13",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
+    { 
+      orderCode:"NU0391031", 
+      supplierName: "xx供应商",
+      type_name: "2",
+      purchasing:'组织f', 
+      purchasingGroup:"qq",
+      voucherDate:"2019年01月01日",
+      key: "7"
+    },
+    { 
+      orderCode:"NU0391032", 
+      supplierName: "xx供应商",
+      type_name: "3",
+      purchasing:'组织g', 
+      purchasingGroup:"pp",
+      voucherDate:"2019年01月31日",
+      key: "8"
    },
-    {
-        key: "14",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
-    }
 ];
 class Demo12 extends Component {
  render() {
    return (
-        <Table bordered columns={columns12} data={data12} scroll={{y:150 }} />
+        <Table columns={columns} data={data} scroll={{y:150 }} />
    );
  }
 }
--- a/demo/demolist/Demo0301.js
+++ b/demo/demolist/Demo0301.js
@ -3,6 +3,7 @@
 * @title 渲染本地数据
 * @parent 数据操作 Data Opetation
 * @description 可自定义页头和页脚。
+* demo0301
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo0302.js
+++ b/demo/demolist/Demo0302.js
@ -3,6 +3,7 @@
 * @title 渲染远程数据
 * @parent 数据操作 Data Opetation
 * @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。
+* demo0302
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo0402.js
+++ b/demo/demolist/Demo0402.js
@ -4,7 +4,7 @@
 * @parent 列渲染 Custom Render
 * @description columns[n] 可以内嵌 children，以渲染分组表头。
 * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
- *
+ * demo0402
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo0404.js
+++ b/demo/demolist/Demo0404.js
@ -3,6 +3,7 @@
 * @title 数据关联
 * @parent 列渲染 Custom Render
 * @description 数据行关联自定义菜单显示
+* demo0404
 */

 import React, { Component } from 'react';
--- a/demo/demolist/Demo0405.js
+++ b/demo/demolist/Demo0405.js
@ -3,7 +3,7 @@
 * @title 列合计（总计）
 * @parent 列渲染 Custom Render
 * @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。
- *
+ * demo0405
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo0501.js
+++ b/demo/demolist/Demo0501.js
@ -3,7 +3,7 @@
 * @title 编辑态表格
 * @parent 编辑 Editor
 * @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
-*
+* demo0501
 */

 import React from "react";
--- a/demo/demolist/Demo0502.js
+++ b/demo/demolist/Demo0502.js
@ -2,7 +2,7 @@
 *
 * @title 单元格编辑
 * @description 可以对单元格进行编辑的表格，示例中给出输入框+必填校验、下拉框编辑模式，以及输入模式的必填校验。
- *
+ * demo0502
 */
 import React, { Component } from "react";
 import { Table } from "tinper-bee";
--- a/demo/demolist/Demo0502.scss
+++ b/demo/demolist/Demo0502.scss
@ -14,9 +14,9 @@
 .help-tip {
  color: #F44336;
 }
-.tooltip-arrow {
-  border-bottom-color: #F44336 !important;
-}
-.tooltip-inner {
-  border-color: #F44336 !important;
-}
+// .tooltip-arrow {
+//   border-bottom-color: #F44336 !important;
+// }
+// .tooltip-inner {
+//   border-color: #F44336 !important;
+// }
--- a/demo/demolist/Demo0601.js
+++ b/demo/demolist/Demo0601.js
@ -3,7 +3,7 @@
 * @title 左侧固定列
 * @parent 列操作-锁定 Fixed
 * @description 固定列到表格的左侧
-*
+* demo0601
 */


--- a/demo/demolist/Demo0602.js
+++ b/demo/demolist/Demo0602.js
@ -3,7 +3,7 @@
 * @title 右侧固定列
 * @parent 列操作-锁定 Fixed
 * @description 固定列到表格的右侧
-*
+* demo0602
 */


--- a/demo/demolist/Demo0603.js
+++ b/demo/demolist/Demo0603.js
@ -3,7 +3,7 @@
 * @title 动态设置列锁定、解除锁定
 * @parent 列操作-锁定 Fixed
 * @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
-*
+* demo0603
 */
 import React, { Component } from 'react';
 import {Icon,Menu,Dropdown} from "tinper-bee";
--- a/demo/demolist/Demo0701.js
+++ b/demo/demolist/Demo0701.js
@ -3,7 +3,7 @@
 * @title 按条件、值过滤
 * @parent 列操作-过滤 Filter
 * @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。
-*
+* demo0701
 */

 import React, { Component } from 'react';
--- a/demo/demolist/Demo0702.js
+++ b/demo/demolist/Demo0702.js
@ -3,7 +3,7 @@
 * @title 复杂表格中行过滤
 * @parent 列操作-过滤 Filter
 * @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
-*
+* demo0702
 */

 /**
--- a/demo/demolist/Demo0802.js
+++ b/demo/demolist/Demo0802.js
@ -3,7 +3,7 @@
 * @title 列过滤面板
 * @parent 列操作-隐藏 Hide
 * @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。
-*
+* demo0802
 */


--- a/demo/demolist/Demo0901.js
+++ b/demo/demolist/Demo0901.js
@ -2,7 +2,7 @@
 * @title 列排序
 * @parent 列操作-排序 Sort
 * @description  column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
-*
+* demo0901
 */


@ -14,35 +14,42 @@ import sort from "../../src/lib/sort.js";
 let ComplexTable = sort(Table, Icon);
 const columns11 = [
  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100
+    title: "单据编号",
+    dataIndex: "num",
+    key: "num",
+    width: 120,
+    fixed: "left"
  },
  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
+    title: "单据日期",
+    dataIndex: "date",
+    key: "date",
    width: 200,
-    sorter: (a, b) => a.c - b.c
  },
  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
+    title: "供应商",
+    dataIndex: "supplier",
+    key: "supplier",
+    width: 100
+  },
+  {
+    title: "联系人",
+    dataIndex: "contact",
+    key: "contact",
+  },
+  {
+    title: "整单数量",
+    dataIndex: "total",
+    key: "total",
+    width: 150,
+    sorter: (a, b) => a.total - b.total
  }
 ];

 const data11 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
+  { num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,key: "1" },
+  { num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,key: "2" },
+  { num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,key: "3" }
 ];

 const defaultProps11 = {
--- a/demo/demolist/Demo0902.js
+++ b/demo/demolist/Demo0902.js
@ -2,6 +2,7 @@
 * @title 后端列排序
 * @parent 列操作-排序 Sort
 * @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序
+* demo0902
 */


@ -11,43 +12,89 @@ import Table from '../../src';
 import sort from "../../src/lib/sort.js";
 let ComplexTable = sort(Table, Icon);

+// const columns11 = [
+//   {
+//     title: "名字",
+//     dataIndex: "a",
+//     key: "a",
+//     width: 100
+//   },
+//   {
+//     title: "性别",
+//     dataIndex: "b",
+//     key: "b",
+//     width: 100
+//   },
+//   {
+//     title: "年龄",
+//     dataIndex: "c",
+//     key: "c",
+//     width: 200,
+//     sorter: (a, b) => a.c - b.c
+//   },
+//   {
+//     title: "武功级别",
+//     dataIndex: "d",
+//     key: "d"
+//   },
+//   {
+//     title: "分数",
+//     dataIndex: "e",
+//     key: "e",
+//     sorter: (a, b) => a.c - b.c
+//   },
+// ];
+
+// const data11 = [
+//   { a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
+//   { a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
+//   { a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
+// ];
 const columns11 = [
  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100
+    title: "单据编号",
+    dataIndex: "num",
+    key: "num",
+    width: 120,
+    fixed: "left"
  },
  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
+    title: "单据日期",
+    dataIndex: "date",
+    key: "date",
    width: 200,
-    sorter: (a, b) => a.c - b.c
  },
  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
+    title: "供应商",
+    dataIndex: "supplier",
+    key: "supplier",
+    width: 100
  },
  {
-    title: "分数",
-    dataIndex: "e",
-    key: "e",
-    sorter: (a, b) => a.c - b.c
+    title: "联系人",
+    dataIndex: "contact",
+    key: "contact",
  },
+  {
+    title: "整单数量",
+    dataIndex: "total",
+    key: "total",
+    width: 150,
+    sorter: (a, b) => a.total - b.total
+  },
+  {
+    title: "金额",
+    dataIndex: "money",
+    key: "money",
+    width: 100,
+    sorter: (a, b) => a.money - b.money
+  }
 ];

 const data11 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
+  { num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: "1" },
+  { num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: "2" },
+  { num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,key: "3" }
 ];

 const defaultProps = {
--- a/demo/demolist/Demo0903.js
+++ b/demo/demolist/Demo0903.js
@ -3,7 +3,7 @@
 * @title 多列排序
 * @parent 列操作-排序 Sort
 * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
- *
+ * demo0903
 */

 import React, { Component } from "react";
@ -15,14 +15,14 @@ import sum from "../../src/lib/sum.js";

 const columns13 = [
  {
-    title: "名字",
+    title: "订单编号",
    dataIndex: "a",
    key: "a",
    className:'dfasd',
    width: 200
  },
  {
-    title: "功力指数",
+    title: "金额",
    dataIndex: "b",
    key: "b",
    width: 200,
@ -34,7 +34,7 @@ const columns13 = [
    }
  },
  {
-    title: "年龄",
+    title: "整单数量",
    dataIndex: "c",
    key: "c",
    width: 200,
@ -46,7 +46,7 @@ const columns13 = [
    }
  },
  {
-    title: "成绩",
+    title: "日销售量",
    dataIndex: "e",
    key: "e",
    width: 200,
@ -54,7 +54,7 @@ const columns13 = [
    sorter: (a, b) => a.c - b.c,
  },
  {
-    title: "武功级别",
+    title: "供应商",
    dataIndex: "d",
    key: "d",
    width: 200
@ -62,11 +62,11 @@ const columns13 = [
 ];

 const data13 = [
-  { a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
-  { a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
-  { a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
-  { a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
-  { a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
+  { a: "NU0391001", b: 675, c: 30, d: "xx供应商",e:100, key: "2" },
+  { a: "NU0391002", b: 43, c: 41, d: "yy供应商",e:90, key: "1" },
+  { a: "NU0391003", b: 43, c: 81, d: "zz供应商", e:120,key: "4" },
+  { a: "NU0391004", b: 43, c: 81, d: "aa供应商", e:130,key: "5" },
+  { a: "NU0391005", b: 153, c: 25, d: "bb供应商",e:90, key: "3" }
 ];


--- a/demo/demolist/Demo1001.js
+++ b/demo/demolist/Demo1001.js
@ -3,6 +3,7 @@
 * @title 拖拽改变列顺序
 * @parent 列操作-拖拽 Drag
 * @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
+* demo1001
 */
 import React, { Component } from 'react';
 import {Icon} from "tinper-bee";
@ -12,19 +13,19 @@ import dragColumn from '../../src/lib/dragColumn';

 const columns = [
  {
-    title: "名字",
+    title: "订单编号",
    dataIndex: "a",
    key: "a",
    width: 100
  },
  {
-    title: "性别",
+    title: "单据日期",
    dataIndex: "b",
    key: "b",
    width: 200
  },
  {
-    title: "年龄",
+    title: "供应商",
    dataIndex: "c",
    key: "c",
    width: 200,
@ -32,7 +33,7 @@ const columns = [
    sorter: (a, b) => a.c - b.c
  },
  {
-    title: "武功级别",
+    title: "联系人",
    dataIndex: "d",
    key: "d",
    width: 200,
@ -40,9 +41,9 @@ const columns = [
 ];

 const data = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
+  { a: "NU0391001", b: "2019-03-01", c: 'xx供应商',d:'Tom', key: "2" },
+  { a: "NU0391002", b: "2018-11-02", c: 'yy供应商',d:'Jack', key: "1" },
+  { a: "NU0391003", b: "2019-05-03", c: 'zz供应商',d:'Jane', key: "3" }
 ];

 const DragColumnTable = dragColumn(Table);
--- a/demo/demolist/Demo1002.js
+++ b/demo/demolist/Demo1002.js
@ -3,6 +3,7 @@
 * @title 拖拽改变列宽度
 * @parent 列操作-拖拽 Drag
 * @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。
+* demo1002
 */
 import React, { Component } from 'react';
 import {Icon} from "tinper-bee";
--- a/demo/demolist/Demo1101.js
+++ b/demo/demolist/Demo1101.js
@ -3,7 +3,7 @@
 * @title 嵌套子表格
 * @parent 扩展行 Expanded Row
 * @description 通过expandedRowRender参数来实现子表格
-*
+* demo1101
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo1102.js
+++ b/demo/demolist/Demo1102.js
@ -3,7 +3,7 @@
 * @title 树型表格数据展示
 * @parent 扩展行 Expanded Row
 * @description 通过在data中配置children数据，来自动生成树形表格
-*
+* demo1102
 */


--- a/demo/demolist/Demo1103.js
+++ b/demo/demolist/Demo1103.js
@ -3,6 +3,7 @@
 * @title 自定义表格标题、表尾、选中行颜色
 * @parent 扩展行 Expanded Row
 * @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。
+* demo1103
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo1105.js
+++ b/demo/demolist/Demo1105.js
@ -3,6 +3,7 @@
 * @title 紧凑型、宽松型
 * @parent 扩展行 Expanded Row
 * @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
+* demo1105
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo1106.js
+++ b/demo/demolist/Demo1106.js
@ -2,7 +2,8 @@
 *
 * @title 自定义行高
 * @parent 扩展行 Expanded Row
-* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。
+* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。
+* demo1106
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo1107.js
+++ b/demo/demolist/Demo1107.js
@ -3,6 +3,7 @@
 * @title 图片在表格中的展示
 * @parent 扩展行 Expanded Row
 * @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
+* demo1107
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo1108.js
+++ b/demo/demolist/Demo1108.js
@ -3,7 +3,7 @@
 * @title 自定义行、列合并
 * @parent 扩展行 Expanded Row
 * @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
-*
+* demo1108
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo1301.js
+++ b/demo/demolist/Demo1301.js
@ -2,8 +2,8 @@
 *
 * @title 多选表格
 * @parent 行操作-选择
-* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
-*
+* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
+* demo1301
 */


@ -13,39 +13,19 @@ import {Checkbox} from "tinper-bee";
 import Table from '../../src';
 import multiSelect from "../../src/lib/multiSelect.js";

-const columns12 = [
-  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200,
-    sorter: (a, b) => a.c - b.c
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
-  }
+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 }
 ];

-const data12 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:false},
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false},
-  { a: "郭靖1", b: "男", c: 25,d:'大侠', key: "4" ,_disabled:true},
-  { a: "郭靖2", b: "男", c: 25,d:'大侠', key: "5" ,_checked:false}
+const data = [
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1",_checked:true },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2",_checked:false },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3",_checked:false },
+  { a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4",_disabled:true },
+  { a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5",_checked:false}
 ];
 //拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
 let MultiSelectTable  = multiSelect(Table, Checkbox);
@ -54,7 +34,7 @@ class Demo12 extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      data: data12
+      data: data
    };
  }
  /**
@ -85,8 +65,8 @@ class Demo12 extends Component {
    };
    return (
      <MultiSelectTable 
-        columns={columns12} 
-        data={data12} 
+        columns={columns} 
+        data={data} 
        multiSelect={multiObj}
        rowClassName={(record,index,indent)=>{
          if (record._checked) {
--- a/demo/demolist/Demo1401.js
+++ b/demo/demolist/Demo1401.js
@ -3,6 +3,7 @@
 * @title 万行以上数据渲染
 * @parent 无限滚动 Infinite-scroll
 * @description 万行数据渲染
+* demo1401
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo1402.js
+++ b/demo/demolist/Demo1402.js
@ -3,7 +3,7 @@
 * @title 嵌套子表格滚动加载
 * @parent 无限滚动 Infinite-scroll
 * @description 通过expandedRowRender参数来实现子表格
-*
+* demo1402
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo1403.js
+++ b/demo/demolist/Demo1403.js
@ -3,6 +3,7 @@
 * @title 多功能表格滚动加载
 * @parent 无限滚动 Infinite-scroll
 * @description
+* demo1403
 */

 import React, { Component } from "react";
--- a/demo/demolist/Demo1404.js
+++ b/demo/demolist/Demo1404.js
@ -2,6 +2,7 @@
 * @title 层级树大数据场景
 * @parent 无限滚动 Infinite-scroll
 * @description
+* demo1404
 */
 import React, { Component } from "react";
 import {Tooltip} from "tinper-bee";
--- a/demo/demolist/Demo1601.js
+++ b/demo/demolist/Demo1601.js
@ -2,6 +2,7 @@
 * @title 表格+分页
 * @parent 分页 Pagination
 * @description 点击分页联动表格
+ * demo1601
 */

 import React, { Component } from "react";
@ -9,26 +10,22 @@ import {Pagination} from "tinper-bee";

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

-const columns8 = [
-  { 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"
-  }
+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 }
 ];

 const pageData = {
  1: [
-    { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
-    { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
-    { 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" }
  ],
  2: [
-    { a: "芙蓉姐姐", b: "女", c: 23, d: "大侠", key: "1" },
-    { a: "芙蓉妹妹", b: "女", c: 23, d: "内行", key: "2" }
+    { a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4" },
+    { a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5" },
  ]
 };

@ -51,7 +48,7 @@ class Demo8 extends Component {
  render() {
    return (
      <div className="demo8">
-        <Table columns={columns8} data={this.state.data} />
+        <Table columns={columns} data={this.state.data} />
        <Pagination
          first
          last
--- a/demo/demolist/Demo1602.js
+++ b/demo/demolist/Demo1602.js
@ -3,7 +3,7 @@
 * @title 表格+搜索
 * @parent 搜索 search
 * @description 搜索刷新表格数据
- *
+ * demo1602
 */

 import React, { Component } from "react";
@ -86,36 +86,17 @@ class Search extends Component {
  }
 }

-const columns9 = [
-  {
-    title: "姓名",
-    dataIndex: "a",
-    key: "a",
-    width: 100
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
-  }
+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 }
 ];

 const userData = [
-  { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
-  { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
-  { 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 Demo9 extends Component {
@ -151,7 +132,7 @@ class Demo9 extends Component {
        <div className="clearfix">
          <Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
        </div>
-        <Table columns={columns9} data={this.state.data} />
+        <Table columns={columns} data={this.state.data} />
      </div>
    );
  }
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -8389,6 +8389,8 @@ ul {
    border-bottom: 1px solid rgb(193, 199, 208);
    text-align: center;
    position: relative; }
+    .u-table-placeholder .table-nodata {
+      font-size: 48px; }
  .u-table-expand-icon-col {
    width: 10px; }
  .u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
@ -8870,10 +8872,6 @@ ul {
  .opt-btns .u-button:hover, .opt-btns .u-button:active {
    background: #344563; }

-.demo02 .u-table-placeholder i {
-  font-size: 60px;
-  line-height: 60px; }
-
 .demo04.u-table tr:nth-child(2n) {
  background: #f7f9fb; }

@ -8899,12 +8897,6 @@ ul {
 .help-tip {
  color: #F44336; }

-.tooltip-arrow {
-  border-bottom-color: #F44336 !important; }
-
-.tooltip-inner {
-  border-color: #F44336 !important; }
-
 th .drop-menu .uf {
  font-size: 12px;
  visibility: hidden;
--- 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/src/Table.js
+++ b/src/Table.js
@ -9,6 +9,7 @@ import addEventListener from 'tinper-bee-core/lib/addEventListener';
 import ColumnManager from './ColumnManager';
 import createStore from './createStore';
 import Loading from 'bee-loading';
+import Icon from 'bee-icon';
 import { Event,EventUtil,closest} from "./utils";

 const propTypes = {
@ -78,7 +79,7 @@ const defaultProps = {
  scroll: {},
  rowRef: () => null,
  getBodyWrapper: body => body,
-  emptyText: () => 'No Data',
+  emptyText: () => <Icon type="uf-nodata" className="table-nodata"></Icon>,
  columns:[],
  minColumnWidth: 80,
  locale:{},
--- a/src/Table.scss
+++ b/src/Table.scss
@ -244,6 +244,7 @@ $icon-color:#505F79;
    border-bottom: 1px solid $table-border-color;
    text-align: center;
    position: relative;
+    .table-nodata{ font-size:48px; }
  }

  &-expand-icon-col {