bee-table/demo/index.js

Table ui component for react

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Con, Row, Col } from 'bee-layout';
import { Panel } from 'bee-panel';
import Drawer from 'bee-drawer';
import Clipboard from 'bee-clipboard'; 
import Button from '../src';



<<<<<<< HEAD
<<<<<<< HEAD
var Demo0101 = require("./demolist/Demo0101");var Demo0102 = require("./demolist/Demo0102");var Demo0103 = require("./demolist/Demo0103");var Demo0104 = require("./demolist/Demo0104");var Demo0105 = require("./demolist/Demo0105");var Demo0106 = require("./demolist/Demo0106");var Demo0107 = require("./demolist/Demo0107");var Demo0201 = require("./demolist/Demo0201");var Demo0202 = require("./demolist/Demo0202");var Demo0301 = require("./demolist/Demo0301");var Demo0302 = require("./demolist/Demo0302");var Demo0402 = require("./demolist/Demo0402");var Demo0404 = require("./demolist/Demo0404");var Demo0405 = require("./demolist/Demo0405");var Demo0501 = require("./demolist/Demo0501");var Demo0502 = require("./demolist/Demo0502");var Demo0503 = require("./demolist/Demo0503");var Demo0505 = require("./demolist/Demo0505");var Demo0601 = require("./demolist/Demo0601");var Demo0602 = require("./demolist/Demo0602");var Demo0603 = require("./demolist/Demo0603");var Demo0701 = require("./demolist/Demo0701");var Demo0702 = require("./demolist/Demo0702");var Demo0802 = require("./demolist/Demo0802");var Demo0901 = require("./demolist/Demo0901");var Demo0902 = require("./demolist/Demo0902");var Demo0903 = require("./demolist/Demo0903");var Demo1001 = require("./demolist/Demo1001");var Demo1002 = require("./demolist/Demo1002");var Demo1101 = require("./demolist/Demo1101");var Demo1102 = require("./demolist/Demo1102");var Demo1103 = require("./demolist/Demo1103");var Demo1105 = require("./demolist/Demo1105");var Demo1106 = require("./demolist/Demo1106");var Demo1107 = require("./demolist/Demo1107");var Demo1108 = require("./demolist/Demo1108");var Demo1201 = require("./demolist/Demo1201");var Demo1301 = require("./demolist/Demo1301");var Demo1302 = require("./demolist/Demo1302");var Demo1401 = require("./demolist/Demo1401");var Demo1402 = require("./demolist/Demo1402");var Demo1403 = require("./demolist/Demo1403");var Demo1404 = require("./demolist/Demo1404");var Demo1601 = require("./demolist/Demo1601");var DemoArray = [{"example":<Demo0101 />,"title":" 基本表格","code":"/**\n*\n* @title 基本表格\n* @parent 基础 Basic\n* @description 单元格数据过长时，可结合Tooltip组件使用。\n* demo0101\n*/\n\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n  { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n  { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n  { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n  { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n  { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n  { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n  { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n  { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0101 extends Component {\n  render() {\n    return (\n        <Table\n          columns={columns}\n          data={data}\n        />\n    );\n  }\n}\n\n\n","desc":" 单元格数据过长时，可结合Tooltip组件使用。"},{"example":<Demo0102 />,"title":" 默认无数据展示","code":"/**\r\n*\r\n* @title 默认无数据展示\r\n* @parent 基础 Basic\r\n* @description 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。\r\n* demo0102\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport {  } from 'tinper-bee';\r\nimport Table from \"tinper-bee/lib/src\";;\r\n\r\nconst columns = [\r\n    {\r\n      title: \"员工编号\",\r\n      dataIndex: \"num\",\r\n      key: \"num\",\r\n      width: \"40%\"\r\n    },\r\n    {\r\n      title: \"员工姓名\",\r\n      dataIndex: \"name\",\r\n      key: \"name\",\r\n      width: \"30%\"\r\n    },\r\n    {\r\n      title: \"部门\",\r\n      dataIndex: \"department\",\r\n      key: \"department\"\r\n    }\r\n];\r\n  \r\nconst data = [];\r\n\r\n// 在此自定义无数据时的展示内容\r\nconst emptyFunc = () => 'No Data';\r\n  \r\nclass Demo02 extends Component {\r\n  render() {\r\n    return (\r\n      <Table \r\n      columns={columns} \r\n      data={data} \r\n      // emptyText={emptyFunc} \r\n      />\r\n    )\r\n  }\r\n}\r\n\r\n","desc":" 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。"},{"example":<Demo0103 />,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @parent 基础 Basic\r\n* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。\r\n* demo0103\r\n*/\r\n\r\nimport React, { Component } from 'react';\nimport {  } from 'tinper-bee';\r\nimport Table from \"tinper-bee/lib/src\";;\r\n\r\nconst columns03 = [\r\n  {\r\n      title: \"序号\",\r\n      dataIndex: \"index\",\r\n      key: \"index\",\r\n      width: 80, \r\n      render(text, record, index) {\r\n          return index + 1;\r\n      }\r\n  },\r\n  {\r\n      title: \"订单编号\",\r\n      dataIndex: \"orderCode\",\r\n      key: \"orderCode\",\r\n      width: 200, \r\n  },\r\n  {\r\n      title: \"供应商名称\",\r\n      dataIndex: \"supplierName\",\r\n      key: \"supplierName\",\r\n      width: 200\r\n  },\r\n  {\r\n      title: \"类型\",\r\n      dataIndex: \"type_name\",\r\n      key: \"type_name\",\r\n      width: 200\r\n  },\r\n  {\r\n      title: \"采购组织\",\r\n      dataIndex: \"purchasing\",\r\n      key: \"purchasing\",\r\n      width: 200\r\n  },\r\n  {\r\n      title: \"采购组\",\r\n      dataIndex: \"purchasingGroup\",\r\n      key: \"purchasingGroup\",\r\n      width: 200\r\n  },\r\n  {\r\n      title: \"凭证日期\",\r\n      dataIndex: \"voucherDate\",\r\n      key: \"voucherDate\",\r\n      width: 200,\r\n  }\r\n];\r\n\r\nconst data03 = [\r\n  { \r\n    orderCode:\"NU0391025\", \r\n    supplierName: \"xx供应商\",\r\n    type_name: \"1\",\r\n    purchasing:'组织c', \r\n    purchasingGroup:\"aa\",\r\n    voucherDate:\"2018年03月18日\",\r\n    key: \"1\"\r\n  }, \r\n  { \r\n    orderCode:\"NU0391026\", \r\n    supplierName: \"xx供应商\",\r\n    type_name: \"2\",\r\n    purchasing:'组织a', \r\n    purchasingGroup:\"bb\",\r\n    voucherDate:\"2018年02月05日\",\r\n    key: \"2\"\r\n  },\r\n  { \r\n    orderCode:\"NU0391027\", \r\n    supplierName: \"xx供应商\",\r\n    type_name: \"3\",\r\n    purchasing:'组织b', \r\n    purchasingGroup:\"aa\",\r\n    voucherDate:\"2018年07月01日\",\r\n    key: \"3\"\r\n  },\r\n  { \r\n    orderCode:\"NU0391028\", \r\n    supplierName: \"xx供应商\",\r\n    type_name: \"4\",\r\n    purchasing:'组织c', \r\n    purchasingGroup:\"cc\",\r\n    voucherDate:\"2019年03月01日\",\r\n    key: \"4\"\r\n  },\r\n  { \r\n    orderCode:\"NU0391029\", \r\n    supplierName: \"xx供应商\",\r\n    type_name: \"5\",\r\n    purchasing:'组织d', \r\n    purchasingGroup:\"ss\",\r\n    voucherDate:\"2019年02月14日\",\r\n    key: \"5\"\r\n  },\r\n  { \r\n    orderCode:\"NU0391030\", \r\n    supplierName: \"xx供应商\",\r\n    type_name: \"1\",\r\n    purchasing:'组织e', \r\n    purchasingGroup:\"zz\",\r\n    voucherDate:\"2019年02月18日\",\r\n    key: \"6\"\r\n  },\r\n  { \r\n    orderCode:\"NU0391031\", \r\n    supplierName: \"xx供应商\",\r\n    type_name: \"2\",\r\n    purchasing:'组织f', \r\n    purchasingGroup:\"qq\",\r\n    voucherDate:\"2019年01月01日\",\r\n    key: \"7\"\r\n  },\r\n  { \r\n    orderCode:\"NU0391032\", \r\n    supplierName: \"xx供应商\",\r\n    type_name: \"3\",\r\n    purchasing:'组织g', \r\n    purchasingGroup:\"pp\",\r\n    voucherDate:\"2019年01月31日\",\r\n    key: \"8\"\r\n  },\r\n];\r\n\r\nclass Demo03 extends Component {\r\n  render() {\r\n    return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;\r\n  }\r\n}\r\n\r\n","desc":" 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。"},{"example":<Demo0104 />,"title":" 隔行换色","code":"/**\n*\n* @title 隔行换色\n* @parent 基础 Basic\n* @description 可自定义斑马线颜色\n* demo0104\n*/\n\n\nimport React, { Component } from 'react';\nimport {  } from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns04 = [\n  {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n      render(text, record, index) {\n          return index + 1;\n      }\n  },\n  {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n  {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n  {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n  {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n  {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n  {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n\nconst data04 = [\n  { \n    orderCode:\"NU0391025\", \n    supplierName: \"xx供应商\",\n    type_name: \"1\",\n    purchasing:'组织c', \n    purchasingGroup:\"aa\",\n    voucherDate:\"2018年03月18日\",\n    key: \"1\"\n  }, \n  { \n    orderCode:\"NU0391026\", \n    supplierName: \"xx供应商\",\n    type_name: \"2\",\n    purchasing:'组织a', \n    purchasingGroup:\"bb\",\n    voucherDate:\"2018年02月05日\",\n    key: \"2\"\n  },\n  { \n    orderCode:\"NU0391027\", \n    supplierName: \"xx供应商\",\n    type_name: \"3\",\n    purchasing:'组织b', \n    purchasingGroup:\"aa\",\n    voucherDate:\"2018年07月01日\",\n    key: \"3\"\n  },\n  { \n    orderCode:\"NU0391028\", \n    supplierName: \"xx供应商\",\n    type_name: \"4\",\n    purchasing:'组织c', \n    purchasingGroup:\"cc\",\n    voucherDate:\"2019年03月01日\",\n    key: \"4\"\n  },\n  { \n    orderCode:\"NU0391029\", \n    supplierName: \"xx供应商\",\n    type_name: \"5\",\n    purchasing:'组织d', \n    purchasingGroup:\"ss\",\n    voucherDate:\"2019年02月14日\",\n    key: \"5\"\n  },\n  { \n    orderCode:\"NU0391030\", \n    supplierName: \"xx供应商\",\n    type_name: \"1\",\n    purchasing:'组织e', \n    purchasingGroup:\"zz\",\n    voucherDate:\"2019年02月18日\",\n    key: \"6\"\n  },\n  { \n    orderCode:\"NU0391031\", \n    supplierName: \"xx供应商\",\n    type_name: \"2\",\n    purchasing:'组织f', \n    purchasingGroup:\"qq\",\n    voucherDate:\"2019年01月01日\",\n    key: \"7\"\n  },\n  { \n    orderCode:\"NU0391032\", \n    supplierName: \"xx供应商\",\n    type_name: \"3\",\n    purchasing:'组织g', \n    purchasingGroup:\"pp\",\n    voucherDate:\"2019年01月31日\",\n    key: \"8\"\n  },\n];\n\nclass Demo04 extends Component {\n  render() {\n    return <Table \n            className=\"demo04\" \n            columns={columns04} \n            data={data04} />\n  }\n}\n\n","desc":" 可自定义斑马线颜色","scss_code":".demo04 {\n    &.u-table tr:nth-child(2n){\n        background: #f7f9fb;\n    }\n    &.u-table tr.u-table-row-hover, .u-table tr:hover{\n        background: #ebecf0;\n    }\n}"},{"example":<Demo0105 />,"title":" 表格 Loading 加载","code":"/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @parent 基础 Basic\r\n* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型\r\n* demo0105\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\r\nimport Table from \"tinper-bee/lib/src\";;\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\n\r\nconst columns05 = [\r\n  { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",fixed:'left'},\r\n  { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n  { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n  { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data05 = [\r\n  { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n  { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n  { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n  constructor(props){\r\n    super(props);\r\n    this.state = {\r\n      loading : true\r\n    }\r\n  }\r\n  changeLoading = () => {\r\n    this.setState({\r\n      loading : !this.state.loading\r\n    })\r\n  }\r\n  render() {\r\n    return (\r\n      <div>\r\n        <Button\r\n          className=\"editable-add-btn\"\r\n          onClick={this.changeLoading}\r\n        >\r\n          切换loading\r\n        </Button>\r\n        <Table\r\n          columns={columns05}\r\n          data={data05}\r\n          // loading={this.state.loading}或者是boolean\r\n          loading={{show:this.state.loading}}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n\r\n","desc":" loading可以传boolean或者object对象，object为bee-loading组件的参数类型"},{"example":<Demo0106 />,"title":" 单元格内容居中","code":"/**\n*\n* @title 单元格内容居中\n* @parent 基础 Basic\n* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。\n* demo0106\n*/\n\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\nimport {Button,Tooltip} from \"tinper-bee\";\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n  {\n    title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 120, className: \"rowClassName\",\n    fixed:'left',\n    textAlign:'center',\n    render: (text, record, index) => {\n      return (\n        <Tooltip inverse overlay={text}>\n          <span tootip={text} style={{\n            display: \"block\",\n            width: \"80px\",\n            textOverflow: \"ellipsis\",\n            overflow: \"hidden\",\n            whiteSpace: \"nowrap\",\n            verticalAlign: \"bottom\",\n          }}>{text}</span>\n        </Tooltip>\n      );\n    }\n  },\n  { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100,textAlign:'center'},\n  { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100,textAlign:'center'},\n  { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100,textAlign:'center' },\n  { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100,textAlign:'center' }\n];\n\nconst data = [\n  { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n  { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n  { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: data\n    }\n  }\n  handleClick = () => {\n    console.log('这是第' , this.currentIndex , '行');\n    console.log('内容：' , this.currentRecord);\n  }\n\n  render() {\n    return (\n        <Table\n          columns={columns}\n          data={data}\n          bordered\n        />\n    );\n  }\n}\n\n\n","desc":" 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。"},{"example":<Demo0107 />,"title":" 带边框","code":"/**\n*\n* @title 带边框\n* @parent 基础 Basic\n* @description 设置 `bordered` 属性可添加表格边框线。\n* demo0107\n*/\n\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\nimport {Button,Tooltip} from \"tinper-bee\";\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n  { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n  { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n  { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n  { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n  { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n  { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n  { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n  { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n  render() {\n    return (\n        <Table\n          columns={columns}\n          data={data}\n          bordered\n        />\n    );\n  }\n}\n\n\n","desc":" 设置 `bordered` 属性可添加表格边框线。"},{"example":<Demo0201 />,"title":" 横向滚动条","code":"/**\n*\n* @title 横向滚动条\n* @parent 滚动 Scroll View\n* @description `scroll.x`的值代表表体内容的实际宽度，默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`，可以手动添加横向滚动条，也可以设置`scroll={{ x:\"110%\" }}`。\n* demo0201\n*/\n\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n    {\n        title: \"序号\",\n        dataIndex: \"index\",\n        key: \"index\",\n        width: 100, \n        render(text, record, index) {\n            return index + 1;\n        }\n    },\n    {\n        title: \"订单编号\",\n        dataIndex: \"orderCode\",\n        key: \"orderCode\",\n        width: 300, \n    },\n    {\n        title: \"供应商名称\",\n        dataIndex: \"supplierName\",\n        key: \"supplierName\",\n        width: 200\n    },\n    {\n        title: \"类型\",\n        dataIndex: \"type_name\",\n        key: \"type_name\",\n        width: 200\n    },\n    {\n        title: \"采购组织\",\n        dataIndex: \"purchasing\",\n        key: \"purchasing\",\n        width: 200\n    },\n    {\n        title: \"采购组\",\n        dataIndex: \"purchasingGroup\",\n        key: \"purchasingGroup\",\n        width: 200\n    },\n    {\n        title: \"凭证日期\",\n        dataIndex: \"voucherDate\",\n        key: \"voucherDate\",\n        width: 300,\n    },\n    {\n        title: \"审批状态\",\n        dataIndex: \"approvalState_name\",\n        key: \"approvalState_name\",\n        width: 200\n    },\n    {\n        title: \"确认状态\",\n        dataIndex: \"confirmState_name\",\n        key: \"confirmState_name\",\n         width: 200\n    }, \n    {\n        title: \"关闭状态\",\n        dataIndex: \"closeState_name\",\n        key: \"closeState_name\",\n        width: 100\n    }\n];\n  \nconst data = [\n    { \n      orderCode:\"NU0391025\", \n      supplierName: \"xx供应商\",\n      type_name: \"1\",\n      purchasing:'组织c', \n      purchasingGroup:\"aa\",\n      voucherDate:\"2018年03月18日\",\n      approvalState_name:\"已审批\",\n      confirmState_name:\"执行中\",\n      closeState_name:\"未关闭\",\n      key: \"1\"\n    }, \n    { \n      orderCode:\"NU0391026\", \n      supplierName: \"xx供应商\",\n      type_name: \"2\",\n      purchasing:'组织a', \n      purchasingGroup:\"bb\",\n      voucherDate:\"2018年02月05日\",\n      approvalState_name:\"已审批\",\n      confirmState_name:\"待确认\",\n      closeState_name:\"未关闭\",\n      key: \"2\"\n    },\n    { \n      orderCode:\"NU0391027\", \n      supplierName: \"xx供应商\",\n      type_name: \"3\",\n      purchasing:'组织b', \n      purchasingGroup:\"aa\",\n      voucherDate:\"2018年07月01日\",\n      approvalState_name:\"已审批\",\n      confirmState_name:\"终止\",\n      closeState_name:\"已关闭\",\n      key: \"3\"\n    },\n    { \n      orderCode:\"NU0391028\", \n      supplierName: \"xx供应商\",\n      type_name: \"4\",\n      purchasing:'组织c', \n      purchasingGroup:\"cc\",\n      voucherDate:\"2019年03月01日\",\n      approvalState_name:\"未审批\",\n      confirmState_name:\"待确认\",\n      closeState_name:\"未关闭\",\n      key: \"4\"\n    },\n    { \n      orderCode:\"NU0391029\", \n      supplierName: \"xx供应商\",\n      type_name: \"5\",\n      purchasing:'组织d', \n      purchasingGroup:\"ss\",\n      voucherDate:\"2019年02月14日\",\n      approvalState_name:\"未审批\",\n      confirmState_name:\"待确认\",\n      closeState_name:\"未关闭\",\n      key: \"5\"\n    }\n];\n\nclass Demo11 extends Component {\n  render() {\n    return (\n        <Table columns={columns} data={data} scroll={{ x: \"110%\" }} />\n    );\n  }\n}\n\n\n","desc":" `scroll.x`的值代表表体内容的实际宽度，默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`，可以手动添加横向滚动条，也可以设置`scroll={{ x:\"110%\" }}`。"},{"example":<Demo0202 />,"title":" 纵向滚动条","code":"/**\n*\n* @title 纵向滚动条\n* @parent 滚动 Scroll View\n* @description 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。\n* demo0202\n*/\n\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n    {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n        render(text, record, index) {\n            return index + 1;\n        }\n    },\n    {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n    {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n    {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n    {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n    {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n    {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n  \nconst data = [\n    { \n      orderCode:\"NU0391025\", \n      supplierName: \"xx供应商\",\n      type_name: \"1\",\n      purchasing:'组织c', \n      purchasingGroup:\"aa\",\n      voucherDate:\"2018年03月18日\",\n      key: \"1\"\n    }, \n    { \n      orderCode:\"NU0391026\", \n      supplierName: \"xx供应商\",\n      type_name: \"2\",\n      purchasing:'组织a', \n      purchasingGroup:\"bb\",\n      voucherDate:\"2018年02月05日\",\n      key: \"2\"\n    },\n    { \n      orderCode:\"NU0391027\", \n      supplierName: \"xx供应商\",\n      type_name: \"3\",\n      purchasing:'组织b', \n      purchasingGroup:\"aa\",\n      voucherDate:\"2018年07月01日\",\n      key: \"3\"\n    },\n    { \n      orderCode:\"NU0391028\", \n      supplierName: \"xx供应商\",\n      type_name: \"4\",\n      purchasing:'组织c', \n      purchasingGroup:\"cc\",\n      voucherDate:\"2019年03月01日\",\n      key: \"4\"\n    },\n    { \n      orderCode:\"NU0391029\", \n      supplierName: \"xx供应商\",\n      type_name: \"5\",\n      purchasing:'组织d', \n      purchasingGroup:\"ss\",\n      voucherDate:\"2019年02月14日\",\n      key: \"5\"\n    },\n    { \n      orderCode:\"NU0391030\", \n      supplierName: \"xx供应商\",\n      type_name: \"1\",\n      purchasing:'组织e', \n      purchasingGroup:\"zz\",\n      voucherDate:\"2019年02月18日\",\n      key: \"6\"\n    },\n    { \n      orderCode:\"NU0391031\", \n      supplierName: \"xx供应商\",\n      type_name: \"2\",\n      purchasing:'组织f', \n      purchasingGroup:\"qq\",\n      voucherDate:\"2019年01月01日\",\n      key: \"7\"\n    },\n    { \n      orderCode:\"NU0391032\", \n      supplierName: \"xx供应商\",\n      type_name: \"3\",\n      purchasing:'组织g', \n      purchasingGroup:\"pp\",\n      voucherDate:\"2019年01月31日\",\n      key: \"8\"\n    },\n];\nclass Demo12 extends Component {\n  render() {\n    return (\n        <Table columns={columns} data={data} scroll={{ y:150 }} />\n    );\n  }\n}\n\n\n","desc":" 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。"},{"example":<Demo0301 />,"title":" 渲染本地数据","code":"/**\n*\n* @title 渲染本地数据\n* @parent 数据操作 Data Opetation\n* @description 可自定义页头和页脚。\n* demo0301\n*/\n\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\nimport {Button,Tooltip} from \"tinper-bee\";\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n  {\n    title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n    fixed:'left',\n    render: (text, record, index) => {\n      return (\n        <Tooltip inverse overlay={text}>\n          <span tootip={text} style={{\n            display: \"block\",\n            width: \"80px\",\n            textOverflow: \"ellipsis\",\n            overflow: \"hidden\",\n            whiteSpace: \"nowrap\",\n            verticalAlign: \"bottom\",\n          }}>{text}</span>\n        </Tooltip>\n      );\n    }\n  },\n  { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n  { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n  { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst data = [\n  { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n  { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n  { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n];\nclass Demo21 extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: data\n    }\n  }\n\n  render() {\n    return (\n        <Table\n          columns={columns}\n          data={data}\n          title={currentData => <div>员工信息统计表</div>}\n          footer={currentData => <div>合计: 共{data.length}条数据</div>}\n        />\n    );\n  }\n}\n\n\n","desc":" 可自定义页头和页脚。"},{"example":<Demo0302 />,"title":" 渲染远程数据","code":"/**\n*\n* @title 渲染远程数据\n* @parent 数据操作 Data Opetation\n* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。\n* demo0302\n*/\n\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\nimport {Button} from \"tinper-bee\";\nimport reqwest from 'reqwest';\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [{\n  title: 'Name',\n  dataIndex: 'name',\n  sorter: true,\n  render: name => `${name.first} ${name.last}`,\n  width: '20%',\n}, {\n  title: 'Gender',\n  dataIndex: 'gender',\n  filters: [\n      { text: 'Male', value: 'male' },\n      { text: 'Female', value: 'female' },\n  ],\n  width: '20%',\n}, {\n  title: 'Email',\n  dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: [],\n      loading: false,\n    }\n  }\n\n  fetch = (params = {}) => {\n    console.log('params:', params);\n    this.setState({ loading: true });\n    reqwest({\n      url: 'https://randomuser.me/api',\n      method: 'get',\n      data: {\n        results: 10,\n        ...params,\n      },\n      type: 'json',\n    }).then((data) => {\n      this.setState({\n        loading: false,\n        data: data.results,\n      });\n    });\n  }\n\n  render() {\n    return (\n      <div className=\"demo22\">\n        <Button className=\"opt-btns\" colors=\"secondary\" onClick={() => this.fetch()}>点击加载远程数据</Button>\n        <Table\n          columns={columns}\n          data={this.state.data}\n          loading={this.state.loading}\n          scroll={{y:200}}\n        />\n      </div>\n    );\n  }\n}\n\n\n","desc":" 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。","scss_code":".demo22{\n    .opt-btns{\n        margin-bottom: 8px;\n    }\n}"},{"example":<Demo0402 />,"title":" 多列表头","code":"/**\r\n *\r\n * @title 多列表头\r\n * @parent 列渲染 Custom Render\r\n * @description columns[n] 可以内嵌 children，以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响\r\n * demo0402\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\r\nimport Table from \"tinper-bee/lib/src\";;\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n  {\r\n    title: \"Name\",\r\n    dataIndex: \"name\",\r\n    key: \"name\",\r\n    width: 100,\r\n    fixed: \"left\"\r\n  },\r\n  {\r\n    title: \"Other\",\r\n    width:600,\r\n    children: [\r\n      {\r\n        title: \"Age\",\r\n        dataIndex: \"age\",\r\n        key: \"age\",\r\n        width: 200\r\n      },\r\n      {\r\n        title: \"Address\",\r\n        children: [\r\n          {\r\n            title: \"Street\",\r\n            dataIndex: \"street\",\r\n            key: \"street\",\r\n            width: 200\r\n          },\r\n          {\r\n            title: \"Block\",\r\n            children: [\r\n              {\r\n                title: \"Building\",\r\n                dataIndex: \"building\",\r\n                key: \"building\",\r\n                width: 100\r\n              },\r\n              {\r\n                title: \"Door No.\",\r\n                dataIndex: \"number\",\r\n                key: \"number\",\r\n                width: 100\r\n              }\r\n            ]\r\n          }\r\n        ]\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    title: \"Company\",\r\n    width:400,\r\n    children: [\r\n      {\r\n        title: \"Company Address\",\r\n        dataIndex: \"companyAddress\",\r\n        key: \"companyAddress\",\r\n        width:200,\r\n      },\r\n      {\r\n        title: \"Company Name\",\r\n        dataIndex: \"companyName\",\r\n        key: \"companyName\",\r\n        width:200,\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    title: \"Gender\",\r\n    dataIndex: \"gender\",\r\n    key: \"gender\",\r\n    width: 60,\r\n    fixed: \"right\"\r\n  }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n  data.push({\r\n    key: i,\r\n    name: \"John Brown\",\r\n    age: i + 1,\r\n    street: \"Lake Park\",\r\n    building: \"C\",\r\n    number: 2035,\r\n    companyAddress: \"Lake Street 42\",\r\n    companyName: \"SoftLake Co\",\r\n    gender: \"M\"\r\n  });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n  render() {\r\n    return (\r\n      <Table\r\n        className={'demo32'}\r\n        columns={columns}\r\n        data={data}\r\n        headerHeight={40} //自定义表头高度\r\n        bordered\r\n        scroll={{ y: 240 }}\r\n      />\r\n    );\r\n  }\r\n}\r\n\r\n\r\n","desc":" columns[n] 可以内嵌 children，以渲染分组表头。","scss_code":".demo32{\n    .u-table-thead th {\n        padding-top: 0px;\n        padding-bottom: 0px;\n    }\n}"},{"example":<Demo0404 />,"title":" 数据关联","code":"/**\n*\n* @title 数据关联\n* @parent 列渲染 Custom Render\n* @description 数据行关联自定义菜单显示\n* demo0404\n*/\n\nimport React, { Component } from 'react';\nimport {  } from 'tinper-bee';\nimport {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\nimport multiSelect from \"tinper-bee/lib/newMultiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst { Item } = Menu;\n\nconst data = [\n  { \n    num:\"NU0391025\", \n    name: \"aa\",\n    sex: \"男\",\n    dept:'财务二科', \n    rank:\"T1\",\n    year:\"1\",\n    seniority:\"1\",\n    key: \"1\"\n  }, \n  { \n    num:\"NU0391026\", \n    name: \"bb\",\n    sex: \"女\",\n    dept:'财务一科', \n    rank:\"M1\",\n    year:\"1\",\n    seniority:\"1\",\n    key: \"2\"\n  },\n  { \n    num:\"NU0391027\", \n    name: \"dd\",\n    sex: \"女\",\n    dept:'财务一科', \n    rank:\"T2\",\n    year:\"2\",\n    seniority:\"2\",\n    key: \"3\"\n  }\n];\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\n\nclass Demo33 extends Component {\n    constructor(props) {\n        super(props);\n    }\n    getSelectedDataFunc = data => {\n        console.log(data);\n    }\n    onSelect = (item) => {\n        console.log(item);\n    }\n    render() {\n        const menu1 = (\n            <Menu\n                onSelect={this.onSelect}>\n                <Item key=\"1\">模态弹出</Item>\n                <Item key=\"2\">链接跳转</Item>\n                <Item key=\"3\">打开新页</Item>\n            </Menu>);\n        let columns = [\n            {   title: \"关联\",dataIndex: \"link\",key: \"link\",width: 80, \n                render: (text, record, index) => {\n                    return (\n                        <Dropdown\n                            trigger={['click']}\n                            overlay={menu1}\n                            animation=\"slide-up\"\n                        >\n                            <Icon type=\"uf-link\" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>\n                        </Dropdown>\n                    )\n                }\n            },\n            { title: \"员工编号\",dataIndex: \"num\",key: \"num\",width: 200 },\n            { title: \"员工姓名\",dataIndex: \"name\",key: \"name\", width: 200},\n            { title: \"员工性别\",dataIndex: \"sex\",key: \"sex\",width: 200 },\n            { title: \"部门\",dataIndex: \"dept\",key: \"dept\",width: 200},\n            { title: \"职级\",dataIndex: \"rank\",key: \"rank\",width: 200},\n            { title: \"工龄\",dataIndex: \"year\",key: \"year\",width: 200},\n            { title: \"司龄\",dataIndex: \"seniority\",key: \"seniority\",width: 200}\n        ];\n        return <ComplexTable \n                bordered\n                columns={columns} \n                data={data} \n                multiSelect={{type: \"checkbox\"}}\n                getSelectedDataFunc={this.getSelectedDataFunc}\n                />\n    }\n}\n\n","desc":" 数据行关联自定义菜单显示"},{"example":<Demo0405 />,"title":" 列合计（总计）","code":"/**\n *\n * @title 列合计（总计）\n * @parent 列渲染 Custom Render\n * @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。\n * demo0405\n */\n\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\nimport {Checkbox} from \"tinper-bee\";\nimport Table from \"tinper-bee/lib/src\";; \nimport sum from \"tinper-bee/lib/sum.js\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\n \nlet ComplexTable = multiSelect(sum(Table), Checkbox);\nlet _sum = 0;\nconst columns = [\n  {\n    title: \"单据编号\",\n    dataIndex: \"num\",\n    key: \"num\",\n    width: 120,\n    fixed: \"left\"\n  },\n  {\n    title: \"单据日期\",\n    dataIndex: \"date\",\n    key: \"date\",\n    width: 200,\n  },\n  {\n    title: \"业务类型\",\n    dataIndex: \"type\",\n    key: \"type\",\n    width: 200\n  },\n  {\n    title: \"供应商\",\n    dataIndex: \"supplier\",\n    key: \"supplier\",\n    width: 100\n  },\n  {\n    title: \"联系人\",\n    dataIndex: \"contact\",\n    key: \"contact\",\n  },\n  {\n    title: \"仓库\",\n    dataIndex: \"warehouse\",\n    key: \"warehouse\",\n    width: 80,\n  },\n  {\n    title: \"整单数量\",\n    dataIndex: \"total\",\n    key: \"total\",\n    width: 100,\n    sumCol: true\n  },\n  {\n    title: \"金额\",\n    dataIndex: \"money\",\n    key: \"money\",\n    width: 100,\n    sumCol: true\n  }\n];\n\nfunction getData(){\n  const data = [];\n  for (let i = 0; i < 5; i++) {\n    data.push({\n      key: i,\n      num: \"NU039100\"+i,\n      date: \"2019-03-01\",\n      type: \"普通采购\",\n      supplier: \"gys\"+i,\n      contact: \"Tom\",\n      warehouse: \"普通仓\",\n      total: i + Math.floor(Math.random()*10),\n      money: 20 *  Math.floor(Math.random()*10)\n    });\n    _sum += data[i].total;\n    _sum += data[i].money;\n  }\n  return data;\n}\n\nclass Demo35 extends Component {\n  \n  constructor(props) {\n    super(props);\n    this.state = {\n      data: getData(),\n      sum:_sum\n    };\n  }\n\n  render() {\n    const {data} = this.state;\n    return (\n      <div>\n         <ComplexTable \n          columns={columns}\n          data={data}\n          bordered\n          footer={currentData => <div>总计: {_sum}</div>}\n        />\n      </div>\n    );\n  }\n}\n\n","desc":" 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。"},{"example":<Demo0501 />,"title":" 行内编辑","code":"/**\n *\n * @title 行内编辑\n * @parent 编辑 Editor\n * @description 可以对行进行编辑的表格\n * demo0501\n */\nimport React, { Component } from \"react\";\nimport {  } from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\nimport { Select, Form, FormControl, Button, Icon, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n  constructor(props, context) {\n    super(props);\n    this.state = {\n      value: props.value\n    };\n  }\n\n  componentWillReceiveProps(nextProps) {\n    if (!nextProps.editable) {\n      this.setState({ value: nextProps.value });\n    }\n  }\n\n  handleChange = value => {\n    const { onChange, throwError } = this.props;\n    if (value === \"\") {\n      throwError && throwError(true);\n    } else {\n      throwError && throwError(false);\n    }\n    this.setState({ value });\n    onChange && onChange(value);\n  };\n\n  render() {\n    const { editable, required, colName } = this.props;\n    const { value } = this.state;\n    let cls = \"editable-cell-input-wrapper\";\n    if (required) cls += \" required\";\n    if (value === \"\") cls += \" verify-cell\";\n    return editable ? (\n      <div className=\"editable-cell\">\n        <div className={cls}>\n          <FormControl value={value} onChange={this.handleChange} />\n          <span className=\"error\">\n            {value === \"\" ? (\n              <Tooltip\n                inverse\n                className=\"u-editable-table-tp\"\n                placement=\"bottom\"\n                overlay={<div className=\"tp-content\">{\"请输入\" + colName}</div>}\n              >\n                <Icon className=\"uf-exc-t required-icon\" />\n              </Tooltip>\n            ) : null}\n          </span>\n        </div>\n      </div>\n    ) : (\n      value || \" \"\n    );\n  }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n  constructor(props, context) {\n    super(props);\n    this.state = {\n      value: props.value\n    };\n  }\n\n  componentWillReceiveProps(nextProps) {\n    if (!nextProps.editable) {\n      this.setState({ value: nextProps.value });\n    }\n  }\n\n  handleSelect = value => {\n    this.setState({ value });\n    this.props.onChange && this.props.onChange(value);\n  };\n\n  render() {\n    const { editable } = this.props;\n    const { value } = this.state;\n    let cls = \"editable-cell-input-wrapper\";\n    return editable ? (\n      <div className=\"editable-cell\">\n        <div className={cls}>\n          <Select value={value} onSelect={this.handleSelect}>\n            {SELECT_SOURCE.map((item, index) => (\n              <Option key={index} value={item}>\n                {item}\n              </Option>\n            ))}\n          </Select>\n        </div>\n      </div>\n    ) : (\n      value || \" \"\n    );\n  }\n}\n\nconst option = {\n  title: \"树\",\n  searchable: true,\n  multiple: false,\n  param: {\n    refCode: \"neworganizition_tree\"\n  },\n  checkStrictly: true,\n  disabled: false,\n  nodeDisplay: record => {\n    return record.refname;\n  },\n  displayField: record => {\n    return record.refname;\n  }, //显示内容的键\n  valueField: \"refpk\", //真实 value 的键\n  refModelUrl: {\n    treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n    treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n  },\n  matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n  filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n  lazyModal: false,\n  strictMode: true,\n  lang: \"zh_CN\",\n  treeData: [\n    {\n      code: \"org1\",\n      children: [\n        {\n          code: \"bj\",\n          entityType: \"mainEntity\",\n          name: \"北京总部-简\",\n          pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n          refcode: \"bj\",\n          refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n          id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n          isLeaf: \"true\",\n          refname: \"北京总部-简\"\n        },\n        {\n          code: \"xd\",\n          entityType: \"mainEntity\",\n          name: \"新道-简\",\n          pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n          refcode: \"xd\",\n          refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n          id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n          isLeaf: \"true\",\n          refname: \"新道-简\"\n        },\n        {\n          code: \"yy3\",\n          entityType: \"mainEntity\",\n          name: \"test3\",\n          pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n          refcode: \"yy3\",\n          refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n          id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n          isLeaf: \"true\",\n          refname: \"test3\"\n        },\n        {\n          code: \"yy1\",\n          entityType: \"mainEntity\",\n          name: \"test1\",\n          pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n          refcode: \"yy1\",\n          refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n          id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n          isLeaf: \"true\",\n          refname: \"test1\"\n        },\n        {\n          code: \"dept2\",\n          children: [\n            {\n              code: \"cs\",\n              entityType: \"subEntity\",\n              organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n              name: \"测试部-简\",\n              pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n              refcode: \"cs\",\n              refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n              id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n              isLeaf: \"true\",\n              refname: \"测试部-简\"\n            },\n            {\n              code: \"qd\",\n              entityType: \"subEntity\",\n              organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n              name: \"前端部-简\",\n              pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n              refcode: \"qd\",\n              refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n              id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n              isLeaf: \"true\",\n              refname: \"前端部-简\"\n            }\n          ],\n          entityType: \"subEntity\",\n          organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n          name: \"生产处\",\n          refcode: \"dept2\",\n          refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n          id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n          refname: \"生产处\"\n        },\n        {\n          code: \"dept1\",\n          children: [\n            {\n              code: \"dept1_2\",\n              entityType: \"subEntity\",\n              organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n              name: \"财务二科\",\n              pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n              refcode: \"dept1_2\",\n              refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n              id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n              isLeaf: \"true\",\n              refname: \"财务二科\"\n            },\n            {\n              code: \"dept1_1\",\n              entityType: \"subEntity\",\n              organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n              name: \"财务一科\",\n              pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n              refcode: \"dept1_1\",\n              refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n              id: \"9711d912-3184-4063-90c5-1facc727813c\",\n              isLeaf: \"true\",\n              refname: \"财务一科\"\n            }\n          ],\n          entityType: \"subEntity\",\n          organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n          name: \"财务处\",\n          refcode: \"dept1\",\n          refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n          id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n          refname: \"财务处\"\n        }\n      ],\n      entityType: \"mainEntity\",\n      name: \"用友集团\",\n      refcode: \"org1\",\n      refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n      id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n      refname: \"用友集团\"\n    }\n  ]\n};\n\nconst RefEditCell = Form.createForm()(\n  class RefComponentWarpper extends Component {\n    constructor(props, context) {\n      super(props);\n      this.state = {\n        value: props.value\n      };\n    }\n\n    componentWillReceiveProps(nextProps) {\n      if (!nextProps.editable) {\n        this.setState({ value: nextProps.value });\n      }\n    }\n\n    handleSelect = values => {\n      this.setState({ value: values[0] });\n      this.props.onChange && this.props.onChange(values[0]);\n    };\n\n    render() {\n      const { getFieldProps, getFieldError } = this.props.form;\n      const { editable, required } = this.props;\n      const { value } = this.state;\n      let cls = \"editable-cell-input-wrapper\";\n      if (required) cls += \" required\";\n      if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n      return editable ? (\n        <div className={cls}>\n          <RefTreeWithInput\n            {...option}\n            onSave={this.handleSelect}\n            getRefTreeData={this.getRefTreeData}\n            {...getFieldProps(\"refValue\", {\n              initialValue: JSON.stringify(value),\n              rules: [\n                {\n                  message: (\n                    <Tooltip\n                      inverse\n                      className=\"u-editable-table-tp\"\n                      placement=\"bottom\"\n                      overlay={\n                        <div className=\"tp-content\">\n                          {\"请输入\" + this.props.colName}\n                        </div>\n                      }\n                    >\n                      <Icon className=\"uf-exc-t required-icon\" />\n                    </Tooltip>\n                  ),\n                  pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n                }\n              ]\n            })}\n          />\n          <span className=\"error\">{getFieldError(\"refValue\")}</span>\n        </div>\n      ) : (\n        value.name || \" \"\n      );\n    }\n  }\n);\n\nlet dataSource = [\n  {\n    a: \"ASVAL_201903280005\",\n    b: \"小张\",\n    c: \"男\",\n    d: {\n      code: \"dept1_2\",\n      entityType: \"subEntity\",\n      organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n      name: \"财务二科\",\n      pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n      refcode: \"dept1_2\",\n      refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n      id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n      isLeaf: \"true\",\n      refname: \"财务二科\"\n    },\n    key: \"1\"\n  },\n  {\n    a: \"ASVAL_201903200004\",\n    b: \"小明\",\n    c: \"男\",\n    d: {\n      code: \"dept1_2\",\n      entityType: \"subEntity\",\n      organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n      name: \"财务二科\",\n      pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n      refcode: \"dept1_2\",\n      refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n      id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n      isLeaf: \"true\",\n      refname: \"财务二科\"\n    },\n    key: \"2\"\n  },\n  {\n    a: \"ASVAL_201903120002\",\n    b: \"小红\",\n    c: \"女\",\n    d: {\n      code: \"dept1_1\",\n      entityType: \"subEntity\",\n      organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n      name: \"财务一科\",\n      pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n      refcode: \"dept1_1\",\n      refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n      id: \"9711d912-3184-4063-90c5-1facc727813c\",\n      isLeaf: \"true\",\n      refname: \"财务一科\"\n    },\n    key: \"3\"\n  }\n];\n\nclass Demo0501 extends Component {\n  constructor(props, context) {\n    super(props);\n    this.state = {\n      dataSource: dataSource,\n      editingRowsMap: {},\n      currentIndex: null,\n      errorEditFlag: false\n    };\n\n    this.columns = [\n      {\n        title: \"员工编号\",\n        dataIndex: \"a\",\n        key: \"a\"\n      },\n      {\n        title: \"名字\",\n        dataIndex: \"b\",\n        key: \"b\",\n        render: (text, record, index) => (\n          <StringEditCell\n            colName={\"名字\"}\n            editable={this.state.editingRowsMap[index] || false}\n            required\n            value={text}\n            onChange={this.onCellChange(index, \"b\")}\n            throwError={this.throwError}\n          />\n        )\n      },\n      {\n        title: \"性别\",\n        dataIndex: \"c\",\n        key: \"c\",\n        width: 100,\n        render: (text, record, index) => (\n          <SelectEditCell\n            editable={this.state.editingRowsMap[index] || false}\n            value={text}\n            onChange={this.onCellChange(index, \"c\")}\n          />\n        )\n      },\n      {\n        title: \"部门\",\n        dataIndex: \"d\",\n        key: \"d\",\n        width: 215,\n        render: (text, record, index) => (\n          <RefEditCell\n            colName={\"部门\"}\n            editable={this.state.editingRowsMap[index] || false}\n            required\n            value={record.d}\n            onChange={this.onCellChange(index, \"d\")}\n            throwError={this.throwError}\n          />\n        )\n      },\n      // 只是用来占位占宽度的\n      {\n        key: \"placeholder\"\n      }\n    ];\n\n    this.state = {\n      dataSource: dataSource,\n      editingRowsMap: {},\n      currentIndex: null,\n      errorEditFlag: false\n    };\n\n    this.dataBuffer = {};\n  }\n\n  edit = index => () => {\n    if (index === null) return;\n    let editingRowsMap = { ...this.state.editingRowsMap };\n    editingRowsMap[index] = index.toString();\n    // 最好使用深复制\n    this.dataBuffer[index] = { ...this.state.dataSource[index] };\n    this.setState({ editingRowsMap });\n  };\n\n  abortEdit = index => () => {\n    let editingRowsMap = { ...this.state.editingRowsMap };\n    delete editingRowsMap[index];\n    delete this.dataBuffer[index];\n    this.setState({ editingRowsMap });\n  };\n\n  delete = index => () => {\n    if (index === null) return;\n    let { dataSource } = this.state;\n    dataSource.splice(index,1);\n    this.setState({\n      dataSource:dataSource\n    });\n  }\n\n  commitChange = index => () => {\n    if (this.state.errorEditFlag) return;\n    let editingRowsMap = { ...this.state.editingRowsMap };\n    delete editingRowsMap[index];\n    let dataSource = [...this.state.dataSource];\n    dataSource[index] = { ...this.dataBuffer[index] };\n    this.setState({ editingRowsMap,  dataSource });\n  };\n\n  onCellChange = (index, key) => value => {\n    this.dataBuffer[index][key] = value;\n  };\n\n  throwError = isError => {\n    if (isError !== this.state.errorEditFlag)\n      this.setState({ errorEditFlag: isError });\n  };\n\n  handleRowHover = (index, record) => {\n    this.currentRecord = record;\n    this.setState({ currentIndex: index });\n  };\n\n  renderRowHover = () => {\n    const { currentIndex } = this.state;\n    return this.state.editingRowsMap[currentIndex] ? (\n      <div className=\"cancel-btns\">\n        <Button\n          size=\"sm\"\n          bordered\n          onClick={this.abortEdit(currentIndex)}\n        >\n          取消\n        </Button>\n        <Button size=\"sm\" colors=\"primary\" onClick={this.commitChange(currentIndex)}>\n          确认\n        </Button>\n      </div>\n    ) : (\n      <div className=\"opt-btns\">\n        <Button size=\"sm\" onClick={this.edit(currentIndex)}>\n          编辑\n        </Button>\n        <Button size=\"sm\" onClick={this.delete(currentIndex)}>\n          删除\n        </Button>\n      </div>\n    );\n  };\n\n  render() {\n    const { dataSource } = th