86 lines
190 KiB
JavaScript
86 lines
190 KiB
JavaScript
import polyfill from '@babel/polyfill'
|
||
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';
|
||
|
||
|
||
|
||
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 Demo0401 = require("./demolist/Demo0401");var Demo0402 = require("./demolist/Demo0402");var Demo0404 = require("./demolist/Demo0404");var Demo0405 = require("./demolist/Demo0405");var Demo0406 = require("./demolist/Demo0406");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 当单元格内容过多时，会自动显示省略号，鼠标hover有提示。showRowNum 设置是否显示序号列。\n* demo0101\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\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 showRowNum={true}\n />\n );\n }\n}\n\nexport default Demo0101;\n","desc":" 当单元格内容过多时，会自动显示省略号，鼠标hover有提示。showRowNum 设置是否显示序号列。"},{"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 { Table } from 'tinper-bee';\r\n\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\nexport default Demo02;","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 { Table } from 'tinper-bee';\r\n\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\nexport default Demo03; ","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 { Table } from 'tinper-bee';\n\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\nexport default Demo04; ","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 { Table, Button,Tooltip } from 'tinper-bee';\r\n\r\n\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\nexport default Demo05;\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 { Table, Button,Tooltip } from 'tinper-bee';\n\n\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\nexport default Demo06;\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 { Table, Button,Tooltip } from 'tinper-bee';\n\n\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\nexport default Demo06;\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 { Table } from 'tinper-bee';\n\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\nexport default Demo11;\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 { Table } from 'tinper-bee';\n\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\nexport default Demo12;\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 { Table, Button,Tooltip } from 'tinper-bee';\n\n\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\nexport default Demo21;\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 { Table, Button } from 'tinper-bee';\n\nimport reqwest from 'reqwest';\n\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\nexport default Demo22;\n","desc":" 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。","scss_code":".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}"},{"example":<Demo0401 />,"title":" 悬浮列","code":"/**\n*\n* @title 悬浮列\n* @parent 列渲染 Custom Render\n* @description 鼠标hover行时呼出操作按钮。\n* demo0401\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Button,Popconfirm } from 'tinper-bee';\n\n\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];\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];\n\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n }\n\n deleteRow=()=>{\n console.log('删除第' , this.currentIndex , '行');\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=(record, index)=>{\n return (\n <div className=\"opt-btns\">\n <Popconfirm key={index} trigger=\"click\" placement=\"left\" content=\"是否删除当前行？\" onClose={this.deleteRow}>\n <Button size=\"sm\">删除</Button> \n </Popconfirm>\n </div>\n )\n }\n\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n onRowHover={this.onRowHover}\n hoverContent={this.getHoverContent}\n />\n );\n }\n}\n\nexport default Demo11;\n","desc":" 鼠标hover行时呼出操作按钮。"},{"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 * 多列表头拖拽的时候,原则只拖拽叶子节点的表头。\r\n * demo0402\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nimport dragColumn from 'bee-table/build/lib/dragColumn';\r\n\r\nconst columns = [\r\n {\r\n title: \"姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"个人信息\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"地址\",\r\n children: [\r\n {\r\n title: \"街道\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"单元\",\r\n children: [\r\n {\r\n title: \"楼号\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"门户\",\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: \"公司信息\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"公司地址\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"公司名称\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"性别\",\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: \"北清路 68 号\",\r\n companyName: \"用友\",\r\n gender: \"男\"\r\n });\r\n}\r\n\r\nconst DragColumnTable = dragColumn(Table);\r\n\r\nclass Demo12 extends Component {\r\n render() {\r\n return (\r\n <DragColumnTable\r\n className={'demo32'}\r\n columns={columns}\r\n data={data}\r\n headerHeight={40} //自定义表头高度\r\n bordered\r\n dragborder={true} \r\n onDropBorder ={(e,width)=>{\r\n console.log(width+\"--调整列宽后触发事件\",e.target);\r\n }}\r\n scroll={{ y: 240 }}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo12;\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 { Table, Icon,Checkbox,Dropdown,Menu } from 'tinper-bee';\n\n\nimport multiSelect from \"bee-table/build/lib/newMultiSelect\";\nimport sort from \"bee-table/build/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 Demo13 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 autoCheckedByClickRows={false} //行点击是否触发勾选动作\n />\n }\n}\n\nexport default Demo13; ","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 { Table, Checkbox } from 'tinper-bee';\n\n\nimport sum from \"bee-table/build/lib/sum.js\";\nimport multiSelect from \"bee-table/build/lib/multiSelect.js\";\n\nlet ComplexTable = multiSelect(sum(Table), Checkbox);\n//sum第二个参数可以设置精度，例如 sum(Table,4); 设计精度为4\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\t sumThousandth: true\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sumCol: true,\n\t sumThousandth: 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: 2000 * 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}\nexport default Demo35;\n","desc":" 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。"},{"example":<Demo0406 />,"title":" 自定义整行和整列样式表格","code":"/**\n *\n * @title 自定义整行和整列样式表格\n * @parent 列渲染 Custom Render\n * @description 某行或某列的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串。此demo展示自定义整行或整列的背景色和字体内容颜色。\n * demo0406\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\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,style: {backgroundColor:'#e3f2fd',color:'#505F79'}},\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\" ,style:{backgroundColor:'#ffebee',color:'#000'}},\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 Demo0406 extends Component {\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n showRowNum={true}\n />\n );\n }\n}\nexport default Demo0406\n","desc":" 某行或某列的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串。此demo展示自定义整行或整列的背景色和字体内容颜色。"},{"example":<Demo0501 />,"title":" 行内编辑","code":"/**\n *\n * @title 行内编辑\n * @parent 编辑 Editor\n * @description 可以对行进行编辑的表格\n * demo0501\n */\nimport React, { Component } from \"react\";\nimport { Table, Select, Form, FormControl, Button, Icon, Tooltip } from 'tinper-bee';\n\n\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 } = this.state;\n const columns = this.columns;\n return (\n <div className=\"demo0501 u-editable-table\">\n <Table\n data={dataSource}\n columns={columns}\n height={40}\n onRowHover={this.handleRowHover}\n hoverContent={this.renderRowHover}\n />\n </div>\n );\n }\n}\n\nexport default Demo0501;\n","desc":" 可以对行进行编辑的表格","scss_code":".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":<Demo0502 />,"title":" 单元格编辑","code":"/**\n *\n * @title 单元格编辑\n * @parent 编辑 Editor\n * @description 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）\n * demo0502\n */\nimport React, { Component } from \"react\";\nimport { Table, Icon, Select, Tooltip, Form } from 'tinper-bee';\n\n\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: this.props.value,\n editable: false\n };\n this.editWarp = React.createRef();\n }\n\n commitChange = () => {\n if (this.state.value === \"\") return;\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.commitChange();\n }\n };\n\n handleChange = e => {\n if (e.target.value === \"\") this.editWarp.className += \" verify-cell\";\n this.setState({ value: e.target.value });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n <div className=\"editable-cell\">\n {editable ? (\n <div ref={el => this.editWarp = el} className=\"editable-cell-input-wrapper\">\n <input\n className={value ? \"u-form-control\" : \"u-form-control error\"}\n autoFocus\n defaultValue={this.props.value}\n value={value}\n onKeyDown={this.handleKeydown}\n onChange={this.handleChange}\n onBlur={this.commitChange}\n />\n {value === \"\" ? (\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 require\" />\n </Tooltip>\n ) : null}\n </div>\n ) : (\n <div className=\"editable-cell-text-wrapper\" onClick={this.edit}>\n {value || \" \"}\n </div>\n )}\n </div>\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n }\n\n handleSelect = value => {\n this.setState({ value });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n <div className=\"editable-cell\">\n {editable ? (\n <div className=\"editable-cell-input-wrapper\">\n <Select\n defaultValue={this.props.value}\n value={value}\n onSelect={this.handleSelect}\n onBlur={this.commitChange}\n autoFocus\n >\n {SELECT_SOURCE.map((item, index) => (\n <Option key={index} value={item}>\n {item}\n </Option>\n ))}\n </Select>\n </div>\n ) : (\n <div className=\"editable-cell-text-wrapper\" onClick={this.edit}>\n {value || \" \"}\n </div>\n )}\n </div>\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, context);\n this.state = {\n value: this.props.value.d,\n editable: false\n };\n this.refWarp = React.createRef();\n }\n\n edit = () => {\n this.setState({ editable: true }, () => this.refWarp.focus());\n };\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n onRefBlur = e => {\n // 消除点击子组件，父组件先失焦再聚焦的事件触发过程带来的副作用\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\n this.commitChange();\n }\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, editable } = this.state;\n return editable ? (\n <div\n ref={el => (this.refWarp = el)}\n className=\"editable-cell-input-wrapper\"\n tabIndex={-1}\n onBlur={this.onRefBlur}\n >\n <RefTreeWithInput\n {...option}\n onSave={this.handleSelect}\n getRefTreeData={this.getRefTreeData}\n {...getFieldProps(\"code1\", {\n initialValue: JSON.stringify(value),\n rules: [\n {\n message: \"请输入请选择\",\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n <span\n className=\"error\"\n style={{ display: \"block\", color: \"#f53c32\" }}\n >\n {getFieldError(\"code1\")}\n </span>\n </div>\n ) : (\n <div className=\"editable-cell-text-wrapper\" onClick={this.edit}>\n {value.name || \" \"}\n </div>\n );\n }\n }\n);\n\nconst 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 Demo0502 extends Component {\n constructor(props, context) {\n super(props);\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 value={text}\n onChange={this.onCellChange(index, \"b\")}\n />\n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n <SelectEditCell\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 value={record}\n onChange={this.onCellChange(index, \"d\")}\n />\n )\n },\n {\n key: \"placeholder\"\n }\n ];\n\n this.state = {\n dataSource: dataSource\n };\n }\n\n onCellChange = (index, key) => {\n return value => {\n const { dataSource } = this.state;\n dataSource[index][key] = value;\n this.setState({ dataSource }, () => console.dir(this.state.dataSource));\n };\n };\n\n render() {\n return (\n <div className=\"demo0502 u-editable-table\">\n <Table data={this.state.dataSource} columns={this.columns} height={40}/>\n </div>\n );\n }\n}\n\nexport default Demo0502;\n","desc":" 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）","scss_code":".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":<Demo0503 />,"title":" 弹框（表单）编辑","code":"/**\n *\n * @title 弹框（表单）编辑\n * @parent 编辑 Editor\n * @description 以弹框形式以对行进行编辑的表格\n * demo0503\n */\n\nimport React, { Component, PureComponent } from \"react\";\nimport { Table } from 'tinper-bee';\n\nimport {\n Select, Form, FormControl, Button, Icon,\n Tooltip, Modal, FormGroup, Label, Row, Col\n} from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nfunction handleFormValueChange(WarpCompProps, field, allFields) {\n const { onChange, throwError } = WarpCompProps;\n if (field.value === \"\") return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(field.value);\n}\n\nconst StringEditCell = Form.createForm({\n onValuesChange: handleFormValueChange\n})(PureStringEditCell);\n\nfunction PureStringEditCell(props) {\n const { getFieldProps, getFieldError } = props.form;\n const { value, required } = props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n <div className={cls}>\n <FormControl\n {...getFieldProps(\"value\", {\n initialValue: value,\n validateTrigger: \"onBlur\",\n rules: [\n {\n required: true,\n message: (\n <Tooltip\n inverse\n className=\"u-editable-table-tp\"\n placement=\"bottom\"\n overlay={\n <div className=\"tp-content\">\n {\"请输入\" + props.colName}\n </div>\n }\n >\n <Icon className=\"uf-exc-t required-icon\" />\n </Tooltip>\n )\n }\n ]\n })}\n />\n <span className=\"error\">{getFieldError(\"value\")}</span>\n </div>\n );\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends PureComponent {\n constructor(props, context) {\n super(props);\n }\n\n handleSelect = value => {\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n return (\n <div className=\"editable-cell\">\n <Select value={this.props.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 );\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 PureComponent {\n constructor(props, context) {\n super(props);\n }\n\n handleSelect = values => {\n const { form, throwError, onChange } = this.props\n if (form.getFieldError(\"refValue\")) return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, required } = this.props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\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 }\n }\n);\n\nclass EditModal extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n data: this.props.data,\n errorEditFlag: false\n };\n\n // 属性名对应 columns 属性中的 key 值\n this.renderElm = {\n b: (record, index) => (\n <StringEditCell\n colName={\"名字\"}\n required={true}\n value={record.b}\n onChange={this.onFieldChange(\"b\")}\n throwError={this.throwError}\n />\n ),\n\n c: (record, index) => (\n <SelectEditCell\n value={record.c}\n onChange={this.onFieldChange(\"c\")}\n />\n ),\n d: (record, index) => (\n <RefEditCell\n colName={\"部门\"}\n required={true}\n value={record.d}\n onChange={this.onFieldChange(\"d\")}\n throwError={this.throwError}\n />\n )\n }\n }\n\n onFieldChange = field => value => {\n let data = { ...this.state.data };\n data[field] = value;\n this.setState({ data });\n }\n\n submitChange = () => {\n if (this.state.errorEditFlag) return;\n const { onSubmit, onHide, currentIndex } = this.props;\n onSubmit && onSubmit(this.state.data, currentIndex);\n onHide && onHide();\n }\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n render() {\n const { show, onHide, columns, currentIndex } = this.props;\n const { data } = this.state;\n return (\n <Modal\n show={show}\n onHide={onHide}\n style={{ width: 800 }}\n className=\"demo0503-m-b\"\n >\n <Modal.Header closeButton>\n <Modal.Title>编辑行</Modal.Title>\n </Modal.Header>\n <Modal.Body>\n <Form>\n <Row style={{ width: 770, margin: \"0 auto\" }}>\n {\n columns.map((item, index) => {\n return (\n <Col sm={6} md={6} lg={6} style={{ padding: \"0 0 0 10px\" }} key={index}>\n <FormGroup>\n <Label><Icon type=\"uf-mi\" className='mast'></Icon>{item.title}</Label>\n {this.renderElm[item.key] &&\n this.renderElm[item.key](\n data,\n currentIndex\n )}\n {!this.renderElm[item.key] && (\n <div className=\"editable-cell\">\n <FormControl\n defaultValue={data[item.dataIndex]}\n disabled={true}\n />\n </div>\n )}\n </FormGroup>\n </Col>\n );\n })\n }\n </Row>\n </Form>\n </Modal.Body>\n <Modal.Footer style={{textAlign: \"right\"}}>\n <Button\n style={{ marginRight: 8 }}\n bordered\n onClick={onHide}\n >\n 取消\n </Button>\n <Button colors=\"primary\" onClick={this.submitChange}>\n 确认\n </Button>\n </Modal.Footer>\n </Modal>\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 Demo0503 extends Component {\n constructor(props, context) {\n super(props);\n // 编辑态下每个单元格对应的编辑模式组件写在 EditModal 组件中，以 key 值对应\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\"\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => record.d.name\n }\n ];\n\n this.state = {\n dataSource: dataSource,\n isEditing: false,\n currentIndex: null\n };\n }\n\n edit = () => {\n if (this.state.currentIndex === null) return;\n this.setState({ isEditing: true });\n };\n\n abortEdit = () => {\n this.setState({ isEditing: false });\n };\n\n commitChange = (editedRowData, rowIndex) => {\n console.log(editedRowData)\n console.log(rowIndex)\n let dataSource = [...this.state.dataSource];\n dataSource[rowIndex] = editedRowData;\n this.setState({ dataSource });\n };\n\n handleRowHover = (index, record) => {\n this.setState({ currentIndex: index });\n };\n\n hideEditModal = () => {\n this.setState({ isEditing: false });\n }\n\n renderRowHover = () => {\n return (\n <div className=\"opt-btns\">\n <Button size=\"sm\" onClick={this.edit}>\n 编辑\n </Button>\n </div>\n );\n };\n\n\n render() {\n const { dataSource, isEditing, currentIndex } = this.state;\n const columns = this.columns;\n return (\n <div className=\"demo0503 u-editable-table\">\n <Table\n data={dataSource}\n columns={columns}\n height={40}\n onRowHover={this.handleRowHover}\n hoverContent={this.renderRowHover}\n />\n {\n isEditing ? (\n <EditModal\n show={isEditing}\n onHide={this.hideEditModal}\n columns={columns}\n data={dataSource[currentIndex]}\n onSubmit={this.commitChange}\n currentIndex={currentIndex}\n />\n ) : null\n }\n </div>\n );\n }\n}\n\nexport default Demo0503;\n","desc":" 以弹框形式以对行进行编辑的表格","scss_code":".demo0503-m-b {\n\n &.u-modal .u-modal-body {\n padding: 16px 0;\n background: #f7f9fb;\n }\n\n .u-form-group {\n overflow: hidden;\n }\n\n .u-form-control {\n font-size: 12px;\n }\n\n .editable-cell {\n display: block;\n float: left;\n width: 265px;\n padding-right: 25px;\n }\n\n .ref-input-wrap {\n width: 240px !important;\n }\n\n .u-label {\n display: block;\n float: left;\n text-align: right;\n width: 110px;\n box-sizing: border-box;\n padding-right: 10px;\n font-size: 12px;\n height: 32px;\n line-height: 32px;\n .mast {\n padding: 0;\n color: red;\n }\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n z-index: 9999 !important;\n\n .tp-content {\n color: #F44336;\n }\n}\n.ref-core-button .u-button:first-child{\n margin-right: 8px;\n}"},{"example":<Demo0505 />,"title":" 全表格编辑","code":"/**\n *\n * @title 全表格编辑\n * @parent 编辑 Editor\n * @description 以行内编辑形式对全表数据进行编辑\n * demo0505\n */\nimport React, { Component } from \"react\";\nimport { Table, Select, Form, FormControl, Button, Icon, Tooltip } from 'tinper-bee';\n\n\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, isEdited } = 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 if (isEdited) cls += \" edited\";\n return editable ? (\n <div className=\"editable-cell\">\n <div className={cls}>\n <FormControl className={!value && \"error\"} 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, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (isEdited) cls += \" edited\";\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, isEdited } = 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 if (isEdited) cls += \" edited\";\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 Demo0505 extends Component {\n constructor(props, context) {\n super(props);\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.isEditingAll}\n isEdited={record.isEdited.b || 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.isEditingAll}\n isEdited={record.isEdited.c || 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.isEditingAll}\n isEdited={record.isEdited.d || 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 // 用于记录数据是否被修改\n dataSource.forEach(item => (item.isEdited = {}));\n this.state = {\n dataSource: dataSource,\n isEditingAll: false,\n currentIndex: null,\n errorEditFlag: false\n };\n\n // 用于记录编辑前数据\n this.dataBuffer = [];\n }\n\n edit = () => {\n this.dataBuffer = [];\n // 最好使用深复制\n this.state.dataSource.forEach((item, index) => {\n this.dataBuffer.push({ ...item });\n });\n this.setState({ isEditingAll: true });\n };\n\n abortEdit = () => {\n let originData = [...this.state.dataSource];\n originData.forEach(item => (item.isEdited = {}));\n this.setState({\n isEditingAll: false,\n dataSource: originData\n });\n };\n\n commitChange = () => {\n if (this.state.errorEditFlag) return;\n const newData = this.dataBuffer.map(item => {\n return Object.assign({}, item, { isEdited: {} });\n });\n this.setState({ isEditingAll: false, dataSource: newData });\n };\n\n onCellChange = (index, key) => value => {\n this.dataBuffer[index][key] = value;\n this.dataBuffer[index].isEdited[key] = true;\n };\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n render() {\n const { dataSource, isEditingAll } = this.state;\n const columns = this.columns;\n return (\n <div className=\"demo0505 u-editable-table\">\n <div className=\"toolbar-btns\">\n {isEditingAll ? (\n <React.Fragment>\n <Button colors=\"primary\" onClick={this.commitChange}>\n 确认\n </Button>\n <Button\n bordered\n onClick={this.abortEdit}\n >\n 取消\n </Button>\n </React.Fragment>\n ) : (\n <Button colors=\"secondary\" onClick={this.edit}>\n 编辑全表\n </Button>\n )}\n </div>\n <Table data={dataSource} columns={columns} height={40} />\n </div>\n );\n }\n}\n\nexport default Demo0505;\n","desc":" 以行内编辑形式对全表数据进行编辑","scss_code":".demo0505 {\n\n .toolbar-btns {\n margin-bottom: 8px;\n\n .u-button {\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n\n .u-table {\n .u-row-select {\n background-color: #FFF7E7;\n }\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .edited::after {\n content: \" \";\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n border-width: 5px;\n border-style: solid;\n border-color: #f44336 transparent transparent #f44336;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":<Demo0601 />,"title":" 左侧固定列","code":"/**\n*\n* @title 左侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的左侧\n* demo0601\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 100\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 100\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 100\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\nclass Demo51 extends Component {\n render() {\n return <Table columns={columns} data={data} scroll={{ x: \"110%\", y: 240 }} />;\n }\n}\n\nexport default Demo51;","desc":" 固定列到表格的左侧"},{"example":<Demo0602 />,"title":" 右侧固定列","code":"/**\n*\n* @title 右侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的右侧\n* demo0602\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table, Popconfirm } from 'tinper-bee';\n\n\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 100\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 100\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 100\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:100,\n fixed: \"right\",\n render(text, record, index) {\n return (\n <div className='operation-btn'>\n <Popconfirm trigger=\"click\" placement=\"right\" content={'这是第' + index + '行，订单编号为:' + record.orderCode}>\n <a href=\"javascript:;\" >\n 一些操作\n </a>\n </Popconfirm>\n </div>\n )\n }\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:\"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: \"4\"\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: \"5\"\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: \"6\"\n }\n];\n\nclass Demo52 extends Component {\n render() {\n return <Table columns={columns} data={data} dragborder={true} scroll={{ y: 200 }} />;\n }\n}\n\nexport default Demo52;","desc":" 固定列到表格的右侧"},{"example":<Demo0603 />,"title":" 动态设置列锁定、解除锁定","code":"/**\n*\n* @title 动态设置列锁定、解除锁定\n* @parent 列操作-锁定 Fixed\n* @description 动态设置columns中数据的fixed属性值【fixed: \"left\"，fixed: \"right\"】。\n* demo0603\n*/\nimport React, { Component } from 'react';\nimport { Table, Icon,Menu,Dropdown } from 'tinper-bee';\n\n\n\n\nconst { Item } = Menu;\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 85, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 120, \n fixed: 'left',\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 150\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 100\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 100\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 \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns\n }\n }\n \n onSelect = ({key,item})=>{ \n console.log(`${key} selected`); //获取key\n let currentObject = item.props.data; //获取选中对象的数据\n let {columns} = this.state;\n let fixedCols = [];\n let nonColums = [];\n columns.find(da=>{\n if(da.key == key){\n da.fixed?delete da.fixed:da.fixed = 'left';\n }\n da.fixed?fixedCols.push(da):nonColums.push(da);\n });\n \n columns = [...fixedCols,...nonColums]\n\n this.setState({\n columns\n });\n }\n //表头增加下拉菜单\n renderColumnsDropdown(columns) {\n const icon ='uf-arrow-down';\n \n return columns.map((originColumn,index) => {\n let column = Object.assign({}, originColumn);\n let menuInfo = [], title='锁定';\n if(originColumn.fixed){\n title = '解锁'\n }\n menuInfo.push({\n info:title,\n key:originColumn.key,\n index:index\n });\n const menu = (\n <Menu onSelect={this.onSelect} >{\n menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })\n }\n </Menu>)\n column.title = (\n <span className='title-con drop-menu'>\n {column.title}\n <Dropdown\n trigger={['click']} \n overlay={menu}\n animation=\"slide-up\"\n >\n <Icon type={icon}/>\n </Dropdown> \n \n </span>\n );\n return column;\n });\n \n }\n\n render() {\n let {columns} = this.state;\n columns = this.renderColumnsDropdown(columns);\n return(\n <div className=\"demo24\">\n <Table columns={columns} data={data} scroll={{ x: \"110%\", y: 240 }}/>\n </div>\n )\n }\n}\n\nexport default Demo24;","desc":" 动态设置columns中数据的fixed属性值【fixed: \"left\"，fixed: \"right\"】。","scss_code":"th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n"},{"example":<Demo0701 />,"title":" 按条件、值过滤","code":"/**\n*\n* @title 按条件、值过滤\n* @parent 列操作-过滤 Filter\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。\n* demo0701\n*/\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns = [\n { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\n { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\n { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\n];\n\nconst data = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo23 extends Component {\n handlerFilterChange = (key, val, condition) => {\n console.log('参数：key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n render() {\n return <Table\n onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数，默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns}\n data={data} />;\n }\n}\n\nexport default Demo23;","desc":" 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。"},{"example":<Demo0702 />,"title":" 复杂表格中行过滤","code":"/**\n*\n* @title 复杂表格中行过滤\n* @parent 列操作-过滤 Filter\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n* demo0702\n*/\n\nimport React, { Component } from 'react';\nimport { Table, Icon,Checkbox } from 'tinper-bee';\n\n\n\nimport multiSelect from 'bee-table/build/lib/multiSelect';\nimport sort from 'bee-table/build/lib/sort';\n\nconst data = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\nclass Demo24 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n dropdownvalue: []\n }\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数：key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onSelect = (item) => {\n console.log(item);\n }\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let columns = [\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"年龄\",\n width: 180,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"日期\",\n width: 190,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"时间范围\",\n width: 290,\n dataIndex: \"mark\",\n key: \"mark\",\n filterType: \"daterange\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"地址\",\n width: 100,\n dataIndex: \"address\",\n key: \"address\",\n filterType: \"dropdown\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n }\n ];\n return <ComplexTable\n onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数，默认500ms\n filterable={true}//是否开启过滤数据功能\n getSelectedDataFunc={this.getSelectedDataFunc}\n bordered\n multiSelect={multiObj}\n columns={columns}\n data={data} />;\n }\n}\n\nexport default Demo24;","desc":" 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等"},{"example":<Demo0802 />,"title":" 列过滤面板","code":"/**\n*\n* @title 列过滤面板\n* @parent 列操作-隐藏 Hide\n* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。\n* demo0802\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Icon,Popover } from 'tinper-bee';\n\n\nimport filterColumn from 'bee-table/build/lib/filterColumn';\nimport sum from 'bee-table/build/lib/sum';\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\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\n\nconst defaultProps21 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo21 extends Component {\n constructor(props) {\n super(props);\n this.state ={\n columns: [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\n required: true\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 150,\n required: true\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"单据日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 150\n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 150\n }\n ]};\n }\n afterFilter = (optData,columns)=>{\n if(optData.key == 'b'){\n if(optData.ifshow){\n columns[2].ifshow = false;\n }else{\n columns[2].ifshow = true;\n }\n this.setState({\n columns21 :columns,\n showFilterPopover:true\n });\n }\n \n }\n \n render() {\n return <FilterColumnTable \n columns={this.state.columns} \n data={data} \n afterFilter={this.afterFilter} \n showFilterPopover={this.state.showFilterPopover}\n />;\n }\n}\n\nDemo21.defaultProps = defaultProps21;\nexport default Demo21;","desc":" 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。"},{"example":<Demo0901 />,"title":" 列排序","code":"/**\n* @title 列排序\n* @parent 列操作-排序 Sort\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称\n* demo0901\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee';\n\n\nimport sort from \"bee-table/build/lib/sort.js\";\n\nlet ComplexTable = sort(Table, Icon);\nconst columns11 = [\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: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 150,\n sorter: (a, b) => a.total - b.total\n }\n];\n\nconst data11 = [\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,key: \"1\" },\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,key: \"2\" },\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n render() {\n\n return <ComplexTable columns={columns11} data={this.state.data} />;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\nexport default Demo11;","desc":" column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称"},{"example":<Demo0902 />,"title":" 后端列排序","code":"/**\n* @title 后端列排序\n* @parent 列操作-排序 Sort\n* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序\n* demo0902\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee';\n\n\nimport sort from \"bee-table/build/lib/sort.js\";\nlet ComplexTable = sort(Table, Icon);\n\n// const columns11 = [\n// {\n// title: \"名字\",\n// dataIndex: \"a\",\n// key: \"a\",\n// width: 100\n// },\n// {\n// title: \"性别\",\n// dataIndex: \"b\",\n// key: \"b\",\n// width: 100\n// },\n// {\n// title: \"年龄\",\n// dataIndex: \"c\",\n// key: \"c\",\n// width: 200,\n// sorter: (a, b) => a.c - b.c\n// },\n// {\n// title: \"武功级别\",\n// dataIndex: \"d\",\n// key: \"d\"\n// },\n// {\n// title: \"分数\",\n// dataIndex: \"e\",\n// key: \"e\",\n// sorter: (a, b) => a.c - b.c\n// },\n// ];\n\n// const data11 = [\n// { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\n// { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\n// { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\n// ];\nconst columns11 = [\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: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 150,\n sorter: (a, b) => a.total - b.total\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sorter: (a, b) => a.money - b.money\n }\n];\n\nconst data11 = [\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: \"1\" },\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: \"2\" },\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,key: \"3\" }\n];\n\nconst defaultProps = {\n prefixCls: \"bee-table\"\n};\nclass Demo28 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n /**\n * 后端获取数据\n */\n sortFun = (sortParam)=>{\n console.info(sortParam);\n //将参数传递给后端排序\n }\n render() {\n let sortObj = {\n mode:'multiple',\n backSource:true,\n sortFun:this.sortFun\n }\n return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;\n }\n}\nDemo28.defaultProps = defaultProps;\n\n\nexport default Demo28;","desc":" 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序"},{"example":<Demo0903 />,"title":" 多列排序","code":"/**\n *\n * @title 多列排序\n * @parent 列操作-排序 Sort\n * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。\n * demo0903\n */\n\nimport React, { Component } from \"react\";\nimport { Table, Checkbox,Button,Icon } from 'tinper-bee';\n\n\nimport multiSelect from \"bee-table/build/lib/multiSelect.js\";\nimport sort from \"bee-table/build/lib/sort.js\";\nimport sum from \"bee-table/build/lib/sum.js\";\n\nconst columns13 = [\n {\n title: \"订单编号\",\n dataIndex: \"a\",\n key: \"a\",\n className:'dfasd',\n width: 200,\n sorter: (pre, after) => {return pre.a.localeCompare(after.a)},\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"金额\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200,\n sumCol: true,\n sorter: (pre, after) => pre.b - after.b,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"整单数量\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (pre, after) => pre.c - after.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"日销售量\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n sumCol: true,\n sorter: (pre, after) => pre.e - after.e,\n },\n {\n title: \"供应商\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200\n }\n];\n\nconst data13 = [\n { a: \"NU0391001\", b: 675, c: 30, d: \"xx供应商\",e:100, key: \"2\" },\n { a: \"NU0391002\", b: 43, c: 41, d: \"yy供应商\",e:90, key: \"1\" },\n { a: \"NU0391003\", b: 43, c: 81, d: \"zz供应商\", e:120,key: \"4\" },\n { a: \"NU0391004\", b: 43, c: 81, d: \"aa供应商\", e:130,key: \"5\" },\n { a: \"NU0391005\", b: 153, c: 25, d: \"bb供应商\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);\n\nclass Demo13 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data13: data13,\n selectedRow: this.selectedRow,\n selectDisabled: this.selectDisabled\n };\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n selectDisabled = (record, index) => {\n // console.log(record);\n if (index === 1) {\n return true;\n }\n return false;\n };\n selectedRow = (record, index) => {\n // console.log(record);\n if (index === 0) {\n return true;\n }\n return false;\n };\n onClick = () => {\n this.setState({\n selectedRow: function() {}\n });\n };\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let sortObj = {\n mode:'multiple'\n }\n \n return (\n <div>\n <Button className=\"editable-add-btn\" onClick={this.onClick}>\n 清空已选\n </Button>\n <ComplexTable\n bordered\n selectDisabled={this.state.selectDisabled}\n selectedRow={this.state.selectedRow}\n columns={columns13}\n data={this.state.data13}\n multiSelect={multiObj}\n sort={sortObj}\n getSelectedDataFunc={this.getSelectedDataFunc}\n />\n </div>\n );\n }\n}\nexport default Demo13;","desc":" 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。"},{"example":<Demo1001 />,"title":" 拖拽改变列顺序","code":"/**\n*\n* @title 拖拽改变列顺序\n* @parent 列操作-拖拽 Drag\n* @description 点击选择表头并左右拖拽，可以改变表格列顺序。 onDragEnd 方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。\n* demo1001\n*/\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n \nimport dragColumn from 'bee-table/build/lib/dragColumn';\n\nconst columns = [\n {\n title: \"订单编号\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"单据日期\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"供应商\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"联系人\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n },\n {\n title: \"操作\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n fixed: 'right',\n }\n];\n\nconst data = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: 'xx供应商',d:'Tom',e:'...', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: 'yy供应商',d:'Jack',e:'...', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: 'zz供应商',d:'Jane',e:'...', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps29 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo29 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return <DragColumnTable \n columns={columns} \n data={data} \n bordered\n draggable={true}\n\n onDrop ={(event,data,columns)=>{\n console.log(\"--拖拽交换列onDrop触发事件\");\n console.log(\"event.target:\",event.target);\n console.log(\"data:\",data);\n console.log(\"拖拽完成后的columns:\",columns);\n }}\n\n onDragEnd ={(event,data,columns)=>{\n console.log(\"--拖拽交换列后触发事件\");\n console.log(\"event.target:\",event.target);\n console.log(\"data:\",data);\n console.log(\"拖拽完成后的columns:\",columns);\n }}\n />;\n }\n}\n\nDemo29.defaultProps = defaultProps29;\nexport default Demo29;","desc":" 点击选择表头并左右拖拽，可以改变表格列顺序。 onDragEnd 方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。"},{"example":<Demo1002 />,"title":" 拖拽改变列宽度","code":"/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头。\n* demo1002\n*/\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n \nimport dragColumn from 'bee-table/build/lib/dragColumn';\n\nconst columns = [\n {\n title: \"订单编号\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"单据日期\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"供应商\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n }, \n {\n title: \"联系人\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\",d:'Tom', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\",d:'Jack', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\",d:'Jane', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nclass Demo30 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return <DragColumnTable \n columns={columns} \n data={data} \n bordered\n scroll={{y:200}}\n dragborder={true} \n onDropBorder ={(e,width)=>{\n console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\n\nexport default Demo30;","desc":" onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头。"},{"example":<Demo1101 />,"title":" 嵌套子表格","code":"/**\n*\n* @title 嵌套子表格\n* @parent 扩展行 Expanded Row\n* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。注意：多选功能和嵌套表格一起使用时，需要设置 expandIconAsCell={true}，把展开按钮放在单元格中展示。\n* demo1101\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Popconfirm,Icon,Checkbox } from 'tinper-bee';\n\n\nimport multiSelect from \"bee-table/build/lib/multiSelect\";\n\nconst columns16 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:100,\n render(text, record, index) {\n return (\n <Popconfirm trigger=\"click\" placement=\"right\" content={'这是第' + index + '行，内容为:' + text}>\n <a href=\"javascript:;\" tooltip={text} >\n 一些操作\n </a>\n </Popconfirm>\n );\n }\n },\n { title: \"订单编号\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"单据日期\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"供应商\", dataIndex: \"c\", key: \"c\", width: 200, fixed:'right' },\n \n];\nconst columns17 = [\n { title: \"订单编号\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"单据日期\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"供应商\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data16 = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\", d: \"操作\", key: \"1\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\", d: \"操作\", key: \"2\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\", d: \"操作\", key: \"3\" }\n];\nconst MultiSelectTable = multiSelect(Table,Checkbox);\nclass Demo16 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{}\n }\n }\n expandedRowRender = (record, index, indent) => {\n return (\n <Table\n columns={columns17}\n data={this.state.data_obj[record.key]}\n />\n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"NU0391056\", b: \"2019-03-01\", c: \"gys1\", d: \"操作\", key: \"1\" },\n { a: \"NU0391057\", b: \"2018-11-02\", c: \"gys2\", d: \"操作\", key: \"2\" },\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"NU0391079\", b: \"2019-04-17\", c: \"gys5\", d: \"操作\", key: \"3\" },\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n\n render() {\n return (\n <MultiSelectTable\n className=\"expanded-table\"\n columns={columns16}\n data={data16}\n onExpand={this.getData}\n expandedRowRender={this.expandedRowRender}\n expandIconAsCell={true}\n collapsedIcon={<Icon type='uf-anglearrowpointingtoright'/>}\n expandedIcon={<Icon type='uf-treearrow-down'/>}\n />\n );\n }\n}\n\nexport default Demo16;\n","desc":" 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。注意：多选功能和嵌套表格一起使用时，需要设置 expandIconAsCell={true}，把展开按钮放在单元格中展示。","scss_code":".expanded-table{\r\n .expand-icon-con .uf{\r\n font-size: 12px;\r\n }\r\n}"},{"example":<Demo1102 />,"title":" 树型表格数据展示","code":"/**\n*\n* @title 树型表格数据展示\n* @parent 扩展行 Expanded Row\n* @description 通过在data中配置children数据，来自动生成树形表格\n* demo1102\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\n\nconst columns4 = [\n {\n title: \"订单编号\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"供应商\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"NU0391001\",\n age: \"2019-03-01\",\n address: \"供应商1\",\n children: [\n {\n key: 11,\n name: \"NU0391002\",\n age: \"2019-03-02\",\n address: \"供应商2\"\n },\n {\n key: 12,\n name: \"NU0391003\",\n age: \"2019-03-03\",\n address: \"供应商3\",\n children: [\n {\n key: 121,\n name: \"NU0391004\",\n age: \"2019-03-04\",\n address: \"供应商4\"\n }\n ]\n },\n {\n key: 13,\n name: \"NU0391005\",\n age: \"2019-03-05\",\n address: \"供应商5\",\n children: [\n {\n key: 131,\n name: \"NU0391006\",\n age: \"2019-03-06\",\n address: \"供应商6\",\n children: [\n {\n key: 1311,\n name: \"NU0391007\",\n age: \"2019-03-07\",\n address: \"供应商7\"\n },\n {\n key: 1312,\n name: \"NU0391008\",\n age: \"2019-03-08\",\n address: \"供应商8\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"NU0391009\",\n age: \"2019-03-09\",\n address: \"供应商9\"\n }\n];\nclass Demo4 extends Component {\n\n constructor(props){\n super(props);\n this.state = {\n data: data4,\n factoryValue: 0,\n selectedRow: new Array(data4.length)//状态同步\n }\n }\n\n render() {\n return <Table \n rowClassName={(record,index,indent)=>{\n if (this.state.selectedRow[index]) {\n return 'selected';\n } else {\n return '';\n }\n }}\n onRowClick={(record,index,indent)=>{\n let selectedRow = new Array(this.state.data.length);\n selectedRow[index] = true;\n this.setState({\n factoryValue: record,\n selectedRow: selectedRow\n });\n }}\n rowKey=\"key\"//每条数据的唯一标示，默认为key，如果不是key，必须传\n columns={columns4} data={data4} />;\n }\n}\n\n\nexport default Demo4;","desc":" 通过在data中配置children数据，来自动生成树形表格"},{"example":<Demo1103 />,"title":" 自定义表格标题、表尾、选中行颜色","code":"/**\r\n*\r\n* @title 自定义表格标题、表尾、选中行颜色\r\n* @parent 扩展行 Expanded Row\r\n* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。\r\n* demo1103\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip, } from 'tinper-bee';\r\n\r\n\r\n\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\r\n];\r\n\r\nconst data = [\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 Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n rowClassName={(record,index,indent)=>{\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\r\n title={currentData => <div>员工信息统计表</div>}\r\n footer={currentData => <div>合计: 共{data.length}条数据</div>}\r\n /> \r\n );\r\n }\r\n}\r\n\r\nexport default Demo26;\r\n","desc":" 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。"},{"example":<Demo1105 />,"title":" 紧凑型、宽松型","code":"/**\n*\n* @title 紧凑型、宽松型\n* @parent 扩展行 Expanded Row\n* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。\n* demo1105\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip,Tag } from 'tinper-bee';\n\n\n\nconst columns = [\n { title: \"订单编号\", dataIndex: \"orderNum\", key: \"orderNum\", width: 100 },\n { title: \"采购组织\", dataIndex: \"org\", key: \"org\", width: 200 },\n { title: \"供应商\", dataIndex: \"supplier\", key: \"supplier\", width: 100 },\n { title: \"订单日期\", dataIndex: \"orderDate\", key: \"orderDate\", width: 150 },\n { title: \"总数量\", dataIndex: \"quantity\", key: \"quantity\", width: 100 },\n { title: \"单据状态\", dataIndex: \"status\", key: \"status\", width: 100, \n render: (text, record, index) => {\n return (\n <Tag colors={text.type}>{text.desc}</Tag>\n );\n }},\n { title: \"提交人\", dataIndex: \"submitter\", key: \"submitter\", width: 100 },\n { title: \"单位\", dataIndex: \"unit\", key: \"unit\", width: 100 },\n { title: \"总税价合计\", dataIndex: \"sum\", key: \"sum\", width: 100 },\n];\n\nconst data = [\n { \n orderNum: \"NU0391025\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年03月18日', \n quantity: '100.00', \n status: {type:'success' ,desc:'正常'}, \n submitter: '小张', \n unit: 'pc', \n sum:'8,487.00', \n key: \"1\" \n },\n { \n orderNum: \"NU0391026\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年02月05日', \n quantity: '91.00', \n status: {type:'danger' ,desc:'异常'}, \n submitter: '小红', \n unit: 'pc', \n sum:'675.00', \n key: \"2\" \n },\n { \n orderNum: \"NU0391027\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年07月01日', \n quantity: '98.00', \n status: {type:'success' ,desc:'正常'}, \n submitter: '小李', \n unit: 'pc', \n sum:'1,531.00', \n key: \"3\" \n }\n];\n\nclass Demo1 extends Component {\n render() {\n return (\n <div>\n <h5>紧凑型表格</h5>\n <Table columns={columns} data={data} size=\"sm\" />\n <h5>宽松型表格</h5>\n <Table columns={columns} data={data} size=\"lg\" />\n </div>\n );\n }\n}\n\nexport default Demo1;\n","desc":" 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。"},{"example":<Demo1106 />,"title":" 自定义行高","code":"/**\n*\n* @title 自定义行高\n* @parent 扩展行 Expanded Row\n* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。\n* demo1106\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip } from 'tinper-bee';\n\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\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];\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];\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容：' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return <div className=\"opt-btns\"><Button size=\"sm\" onClick={this.handleClick}>一些操作</Button> </div>\n }\n\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n parentNodeId='parent'\n height={40}\n headerHeight={40}\n hoverContent={this.getHoverContent}\n onRowHover={this.onRowHover}\n onRowClick={(record, index, indent) => {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\nexport default Demo1;\n","desc":" 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。"},{"example":<Demo1107 />,"title":" 图片在表格中的展示","code":"/**\n*\n* @title 图片在表格中的展示\n* @parent 扩展行 Expanded Row\n* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注：如果图片在固定列中，可以使用heightConsistent属性，当此属性为true，就不会出现错行问题\n* demo1107\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip } from 'tinper-bee';\n\n\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80,\n render(text, record, index) {\n return index + 1;\n }\n },\n {\n title: \"图样\",\n dataIndex: \"picture\",\n key: \"picture\",\n render(text, record, index) {\n return <img style={{height:'50px'}} src={text} alt=\"Picture\"/>\n }\n },\n {\n title: \"组织部门\",\n dataIndex: \"orgDept\",\n key: \"orgDept\",\n width: 100,\n },\n {\n title: \"设施管理部门\",\n dataIndex: \"facilityManageUnit\",\n key: \"facilityManageUnit\",\n width: 150,\n },\n {\n title: \"案卷编号\",\n dataIndex: \"docketnum\",\n key: \"docketnum\",\n width: 100,\n },\n {\n title: \"数量\",\n dataIndex: \"num\",\n key: \"num\",\n width: 100,\n },\n {\n title: \"首次发现时间\",\n dataIndex: \"discoveryTime\",\n key: \"discoveryTime\",\n width: 150,\n },\n {\n title: \"实际修复时间\",\n dataIndex: \"repairTime\",\n key: \"repairTime\",\n width: 150,\n }\n];\n\nconst data = [\n { 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\"},\n { 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\"},\n { 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\"}\n];\n\nclass Demo1107 extends Component {\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n />\n );\n }\n}\n\nexport default Demo1107;\n","desc":" 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注：如果图片在固定列中，可以使用heightConsistent属性，当此属性为true，就不会出现错行问题"},{"example":<Demo1108 />,"title":" 自定义行、列合并","code":"/**\n*\n* @title 自定义行、列合并\n* @parent 扩展行 Expanded Row\n* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。\n* demo1108\n*/\n\nimport React, { Component } from \"react\";\nimport { Button, Table } from 'tinper-bee';\n\n\nconst renderContent = (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n};\n\nconst columns = [{\n title: '姓名',\n key: \"name\",\n dataIndex: 'name',\n render: (text, row, index) => {\n if (index < 4) {\n return <a href=\"#\">{text}</a>;\n }\n return {\n children: <a href=\"#\">{text}</a>,\n props: {\n colSpan: 5,\n },\n };\n },\n}, {\n title: '年龄',\n key: \"age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: '联系方式',\n colSpan: 2,\n key: \"tel\",\n dataIndex: 'tel',\n render: (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 2) {\n obj.props.rowSpan = 2;\n }\n if (index === 3) {\n obj.props.rowSpan = 0;\n }\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n },\n}, {\n title: '手机号',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: '家庭住址',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\n\nconst columns1 = [{\n title: '姓名',\n key: \"name\",\n dataIndex: 'name',\n render: (text, row, index) => {\n if (index < 4) {\n return <a href=\"#\">{text}</a>;\n }\n return {\n children: <a href=\"#\">{text}</a>,\n props: {\n colSpan: 5,\n },\n };\n },\n}, {\n title: '年龄',\n key: \"age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: '联系方式',\n colSpan: 2,\n key: \"tel\",\n dataIndex: 'tel',\n render: renderContent\n}, {\n title: '手机号',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: '家庭住址',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\nconst data = [{\n key: '1',\n name: '小红',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: '北京海淀',\n}, {\n key: '2',\n name: '小明',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: '河北张家口',\n}, {\n key: '3',\n name: '张三',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '浙江杭州',\n}, {\n key: '4',\n name: '李四',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '广州深圳',\n}, {\n key: '5',\n name: '王五',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '北京昌平',\n}];\n\nclass Demo15 extends Component {\n constructor(props){\n super(props);\n this.state={\n colFlag:false\n }\n }\n onChange=()=>{\n const colFlag = this.state.colFlag;\n this.setState({\n colFlag:!colFlag\n })\n }\n render() {\n let cols = this.state.colFlag?columns:columns1;\n return (\n <div>\n <Button onClick={this.onChange} colors=\"secondary\" style={{marginBottom:'8px'}}>change列</Button>\n <Table columns={cols} data={data} bordered/>\n </div>\n \n );\n }\n}\n\n\nexport default Demo15;\n","desc":" 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。"},{"example":<Demo1201 />,"title":" 拖拽改变行顺序","code":"/**\n*\n* @title 拖拽改变行顺序\n* @parent 行操作-拖拽\n* @description `rowDraggAble`参数设置是否使用行交换顺序功能，`useDragHandle`设置拖拽把手，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* Demo1201\n*/\n\nimport React, { Component } from \"react\";\nimport { Switch, Table } from 'tinper-bee';\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:200 },\n { title: \"系统权限\", dataIndex: \"c\", key: \"c\", width: 200,render:()=>{return(<Switch size=\"sm\" />)}},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1001\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"1002\" },\n { a: \"ASVAL_201903120001\", b: \"小红\", c: \"女\", d: \"财务四科\", e: \"T3\", key: \"1003\" },\n { a: \"ASVAL_201903120002\", b: \"小姚\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"1004\" },\n { a: \"ASVAL_201903120003\", b: \"小岳\", c: \"男\", d: \"财务五科\", e: \"T2\", key: \"1005\" },\n { a: \"ASVAL_201903120004\", b: \"小王\", c: \"男\", d: \"财务一科\", e: \"T5\", key: \"1006\" },\n { a: \"ASVAL_201903120005\", b: \"小绍\", c: \"男\", d: \"财务七科\", e: \"T2\", key: \"1007\" },\n { a: \"ASVAL_201903120006\", b: \"小郭\", c: \"男\", d: \"财务一科\", e: \"T3\", key: \"1008\" },\n { a: \"ASVAL_201903120007\", b: \"小杨\", c: \"女\", d: \"财务四科\", e: \"T2\", key: \"1009\" }\n];\n\nclass Demo38 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 /**\n * 行拖拽开始时触发\n * @param record 拖拽行的数据\n * @param index 拖拽行的下标序号\n */\n onDragRowStart = (record,index) => {\n console.log('拖拽的行数据：', record);\n console.log('拖拽的行序号：', index);\n }\n\n /**\n * 行拖拽结束时触发\n * @param data 拖拽改变顺序后的新data数组\n * @param record 拖拽行的数据\n */\n onDropRow = (data, record) => {\n console.log('重排序后的data： ', data);\n console.log('拖拽的行数据： ', record);\n }\n\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n rowDraggAble={true}\n // useDragHandle={true}\n onDragRowStart={this.onDragRowStart}\n onDropRow={this.onDropRow}\n />\n );\n }\n}\n\nexport default Demo38;\n","desc":" `rowDraggAble`参数设置是否使用行交换顺序功能，`useDragHandle`设置拖拽把手，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。"},{"example":<Demo1301 />,"title":" 多选功能","code":"/**\r\n*\r\n* @title 多选功能\r\n* @parent 行操作-选择\r\n* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。\r\n* demo1301\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table, Checkbox } from 'tinper-bee';\r\n\r\n\r\n\r\nimport multiSelect from \"bee-table/build/lib/multiSelect.js\";\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\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 data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\",_checked:true },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\",_checked:false },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\",_checked:false },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\",_disabled:true },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\",_checked:false}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n *@param newData 进行多选操作之后的新数据 data\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index,newData) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 注意：需要用回调中提供的参数 newData，去更新 state 或 store 中的 data 属性值，否则当表格重新render的时候，已选数据会被冲刷掉。\r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n inverse: true, //设置选中为红色填充\r\n };\r\n return (\r\n <MultiSelectTable \r\n bordered\r\n columns={columns} \r\n data={data} \r\n // multiSelectConfig={multiObj} //可以自定义 Checkbox 属性\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo12;","desc":" 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。"},{"example":<Demo1302 />,"title":" 单选功能","code":"/**\r\n*\r\n* @title 单选功能\r\n* @parent 行操作-选择\r\n* @description 表格支持单选行操作，可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。\r\n* Demo1302\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Radio, Table } from 'tinper-bee';\r\n\n\r\n\r\nimport singleSelect from \"bee-table/build/lib/singleSelect.js\";\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300 },\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\n const data = [\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 { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" }\r\n ];\r\n\r\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\r\nlet SingleSelectTable = singleSelect(Table, Radio);\r\n\r\nclass Demo1302 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0,\r\n }\r\n }\r\n\r\n /**\r\n *@param selected 当前选中的行数据(当前操作行数据)\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (record,index) => {\r\n console.log(\"record\", record, \"index\",index);\r\n\r\n this.setState({\r\n selectedRowIndex:index\r\n })\r\n };\r\n\r\n render() {\r\n let {selectedRowIndex} = this.state;\r\n\r\n return (\r\n <SingleSelectTable\r\n className=\"demo1302\"\r\n bordered\r\n columns={columns}\r\n data={data}\r\n selectedRowIndex={selectedRowIndex}\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n /> \r\n );\r\n }\r\n}\r\n\r\nexport default Demo1302;\r\n","desc":" 表格支持单选行操作，可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。"},{"example":<Demo1401 />,"title":" 万行以上数据渲染","code":"/**\n*\n* @title 万行以上数据渲染\n* @parent 无限滚动 Infinite-scroll\n* @description 万行数据渲染\n* demo1401\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Tooltip } from 'tinper-bee';\n\n\nimport BigData from \"bee-table/build/lib/bigData\";\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'60',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n <Tooltip inverse overlay={text}>\n <span tootip={text} style={{\n display: \"block\",\n width: \"40px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"bottom\",\n }}>{text}</span>\n </Tooltip>\n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo30 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n /**\n * 表体滚动加载时触发的回调函数\n * @param endIndex 可视区最后一条数据的 index 序号\n */\n handleBodyScroll = endIndex => {\n console.log('endIndex：', endIndex);\n }\n\n render() {\n return (\n <div>\n <BigDataTable\n columns={columns}\n data={this.state.data}\n scroll={{y:300}}\n onRowClick={(record, index, indent) => {\n console.log('currentIndex--'+index);\n }}\n onBodyScroll={this.handleBodyScroll}\n />\n </div>\n );\n }\n}\n\nexport default Demo30;","desc":" 万行数据渲染","scss_code":".big-data tr td {\n // height: 48px;\n}"},{"example":<Demo1402 />,"title":" 嵌套子表格滚动加载","code":"/**\n*\n* @title 嵌套子表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description 通过expandedRowRender参数来实现子表格。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* demo1402\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Popconfirm } from 'tinper-bee';\n\n\nimport BigData from \"bee-table/build/lib/bigData\";\nconst BigDataTable = BigData(Table);\nconst outColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n <Popconfirm trigger=\"click\" placement=\"right\" content={'这是第' + index + '行，内容为:' + text}>\n <a href=\"javascript:;\">\n 一些操作\n </a>\n </Popconfirm>\n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst innerColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n <Popconfirm trigger=\"click\" placement=\"right\" content={'这是第' + index + '行，内容为:' + text}>\n <a href=\"javascript:;\">\n 一些操作\n </a>\n </Popconfirm>\n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [ ...new Array(10000) ].map((e, i) => {\n return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n })\n\n\n\n\n\nclass Demo31 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{\n 0:[\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ],\n 1: [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ],\n }\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 200;\n let innderData = [ ...new Array(100) ].map((e, i) => {\n return { a: index+\"-\"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+\"-\"+ i };\n })\n return (\n <Table\n \n columns={innerColumns}\n scroll={{y:height}}\n data={innderData} \n\n />\n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n <BigDataTable\n columns={outColumns}\n data={data16}\n onExpand={this.getData}\n expandedRowRender={this.expandedRowRender}\n scroll={{y:350}}\n // defaultExpandedRowKeys={[0,1]}\n />\n );\n }\n}\n\nexport default Demo31;\n","desc":" 通过expandedRowRender参数来实现子表格。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。"},{"example":<Demo1403 />,"title":" 多功能表格滚动加载","code":"/**\n*\n* @title 多功能表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description\n* demo1403\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Tooltip,Checkbox,Icon,Popover } from 'tinper-bee';\n\n\nimport BigData from \"bee-table/build/lib/bigData\";\nimport multiSelect from 'bee-table/build/lib/multiSelect';\nimport filterColumn from 'bee-table/build/lib/filterColumn';\n\nlet ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);\n\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'80',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n <Tooltip inverse overlay={text}>\n <span tootip={text} style={{\n display: \"block\",\n width: \"40px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"bottom\",\n }}>{text}</span>\n </Tooltip>\n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo43 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n\n render() {\n return (\n <ComplexTable\n columns={columns}\n data={data}\n parentNodeId='parent'\n scroll={{y:300}}\n bordered\n onRowClick={(record, index, indent) => {\n this.setState({\n selectedRowIndex: index\n });\n }}\n getSelectedDataFunc={this.getSelectedDataFunc}/>\n\n );\n }\n}\n\nexport default Demo43;\n","desc":""},{"example":<Demo1404 />,"title":" 层级树大数据场景","code":"/**\n* @title 层级树大数据场景\n* @parent 无限滚动 Infinite-scroll\n* @description\n* demo1404\n*/\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\n\n\n\nimport BigData from \"bee-table/build/lib/bigData\";\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title: '序号',\n dataIndex: 'index',\n width: '150',\n key: 'index',\n render: (text, record, index) => {\n return record.index ? record.index : index\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\" },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [...new Array(10)].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if (i % 3 == 0) {\n rs.b = '女';\n rs.children = [];\n for (let subi = 0; subi < 3; subi++) {\n rs.children.push({ a: i + subi + 'asub', b: i + subi + 'bsub', c: i + subi + 'csub', d: i + subi + 'dsub', key: i + `${subi} sub` });\n rs.children[subi].children = []\n for (let subj = 0; subj < 100; subj++) {\n rs.children[subi].children.push({ a: 333 + ' ' + subj, b: 333 + ' ' + subj, c: 333 + ' ' + subj, d: 333 + ' ' + subj, key: i + `${subj} sub1` });\n }\n }\n } else {\n rs.children = [];\n for (let subi = 0; subi < 3; subi++) {\n rs.children.push({ a: i + subi + 'asub', b: i + subi + 'bsub', c: i + subi + 'csub', d: i + subi + 'dsub', key: i + `${subi} sub` });\n }\n }\n return rs;\n})\n\nconst data2 = [...new Array(10000)].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if (i % 3 == 0) {\n rs.b = '女';\n }\n return rs;\n})\n\nclass Demo34 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n /**\n * expanded : 当前的状态\n * record : 当前行的数据\n */\n onExpand = (expanded, record) => {\n console.log('当前的状态---' + expanded, ' 当前行的数据---' , record);\n }\n handleClick = () => {\n this.setState({\n data: data2\n })\n }\n render () {\n return (\n <div>\n <Button onClick={this.handleClick} colors=\"secondary\" style={{ marginBottom: '8px' }}>改变数据源</Button>\n <BigDataTable\n columns={columns}\n data={this.state.data}\n parentNodeId='parent'\n scroll={{ y: 300 }}\n onExpand={this.onExpand}\n onRowClick={(record, index, indent) => {\n console.log('currentIndex--' + index);\n }}\n rowKey=\"key\"//每条数据的唯一标示，默认为key，如果不是key，必须传\n />\n </div>\n\n );\n }\n}\n\nexport default Demo34;","desc":""},{"example":<Demo1601 />,"title":" 表格+分页","code":"/**\n * @title 表格+分页\n * @parent 分页 Pagination\n * @description 点击分页联动表格\n * demo1601\n */\n\nimport React, { Component } from \"react\";\nimport { Table, Pagination } from 'tinper-bee';\n\n\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\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 pageData = {\n 1: [\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 ],\n 2: [\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" },\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n <div className=\"demo8\">\n <Table columns={columns} data={this.state.data} />\n <Pagination\n first\n last\n prev\n next\n maxButtons={5}\n boundaryLinks\n activePage={this.state.activePage}\n onSelect={this.handleSelect.bind(this)}\n onDataNumSelect={this.dataNumSelect}\n showJump={true}\n noBorder={true}\n total={100}\n dataNum={2}\n />\n </div>\n );\n }\n}\nexport default Demo8;\n","desc":" 点击分页联动表格","scss_code":".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}"}]
|
||
|
||
|
||
class Demo extends Component {
|
||
constructor(props){
|
||
super(props);
|
||
this.state = {
|
||
open: false
|
||
}
|
||
}
|
||
handleClick=()=> {
|
||
this.setState({ open: !this.state.open })
|
||
}
|
||
fCloseDrawer=()=>{
|
||
this.setState({
|
||
open: false
|
||
})
|
||
}
|
||
|
||
render () {
|
||
const { title, example, code, desc, scss_code } = this.props;
|
||
|
||
const header = (
|
||
<div>
|
||
<p className='component-title'>{ title }</p>
|
||
<p>{ desc }</p>
|
||
<span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
|
||
</div>
|
||
);
|
||
return (
|
||
<Col md={12} id={title.trim()} className='component-demo'>
|
||
<Panel header={header}>
|
||
{example}
|
||
</Panel>
|
||
|
||
<Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
|
||
<div className='component-code-copy'> JS代码
|
||
<Clipboard action="copy" text={code}/>
|
||
</div>
|
||
<pre className="pre-js">
|
||
<code className="hljs javascript">{ code }</code>
|
||
</pre >
|
||
{!!scss_code ?<div className='component-code-copy copy-css'> SCSS代码
|
||
<Clipboard action="copy" text={scss_code}/>
|
||
</div>:null }
|
||
{ !!scss_code ? <pre className="pre-css">
|
||
<code className="hljs css">{ scss_code }</code>
|
||
</pre> : null }
|
||
</Drawer>
|
||
</Col>
|
||
)
|
||
}
|
||
}
|
||
|
||
class DemoGroup extends Component {
|
||
constructor(props){
|
||
super(props)
|
||
}
|
||
render () {
|
||
return (
|
||
<Row>
|
||
{DemoArray.map((child,index) => {
|
||
|
||
return (
|
||
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
|
||
)
|
||
|
||
})}
|
||
</Row>
|
||
)
|
||
}
|
||
}
|
||
|
||
ReactDOM.render(<DemoGroup/>, document.getElementById('tinperBeeDemo'));
|