85 lines
120 KiB
JavaScript
85 lines
120 KiB
JavaScript
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 Demo0201 = require("./demolist/Demo0201");var Demo0202 = require("./demolist/Demo0202");var Demo0301 = require("./demolist/Demo0301");var Demo0302 = require("./demolist/Demo0302");var Demo0402 = require("./demolist/Demo0402");var Demo0404 = require("./demolist/Demo0404");var Demo0405 = require("./demolist/Demo0405");var Demo0501 = require("./demolist/Demo0501");var Demo0502 = require("./demolist/Demo0502");var 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 Demo1301 = require("./demolist/Demo1301");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 Demo1602 = require("./demolist/Demo1602");var DemoArray = [{"example":<Demo0101 />,"title":" 基本表格","code":"/**\n*\n* @title 基本表格\n* @parent 基础 Basic\n* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, 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: \"inline-block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n }}>{text}</span>\n </Tooltip>\n );\n }\n },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500,textAlign:'center'},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500,textAlign:'center'},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200,textAlign:'center' }\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 Demo01 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 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 bordered = {true}\n hoverContent={this.getHoverContent}\n onRowHover={this.onRowHover}\n />\n );\n }\n}\n\n\n","desc":" 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。"},{"example":<Demo0102 />,"title":" 默认无数据展示","code":"/**\r\n*\r\n* @title 默认无数据展示\r\n* @parent 基础 Basic\r\n* @description 无数据时显示效果展示（可自定义）\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table, Icon } from 'tinper-bee';\r\n\n\r\nconst columns02 = [\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 data02 = [];\r\n\r\nconst emptyFunc = () => <Icon type=\"uf-nodata\"></Icon>\r\n \r\nclass Demo02 extends Component {\r\n render() {\r\n return <Table className=\"demo02\" columns={columns02} data={data02} emptyText={emptyFunc} />;\r\n }\r\n}\r\n\r\n","desc":" 无数据时显示效果展示（可自定义）","scss_code":".demo02 {\n .u-table-placeholder i{\n font-size: 60px;\n line-height: 60px;\n }\n}"},{"example":<Demo0103 />,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @parent 基础 Basic\r\n* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\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 title: \"审批状态\",\r\n dataIndex: \"approvalState_name\",\r\n key: \"approvalState_name\",\r\n width: 200\r\n },\r\n {\r\n title: \"确认状态\",\r\n dataIndex: \"confirmState_name\",\r\n key: \"confirmState_name\",\r\n width: 200\r\n }, \r\n {\r\n title: \"关闭状态\",\r\n dataIndex: \"closeState_name\",\r\n key: \"closeState_name\",\r\n width: 100\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 approvalState_name:\"已审批\",\r\n confirmState_name:\"执行中\",\r\n closeState_name:\"未关闭\",\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 approvalState_name:\"已审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\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 approvalState_name:\"已审批\",\r\n confirmState_name:\"终止\",\r\n closeState_name:\"已关闭\",\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 approvalState_name:\"未审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\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 approvalState_name:\"未审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\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 approvalState_name:\"已审批\",\r\n confirmState_name:\"终止\",\r\n closeState_name:\"已关闭\",\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 approvalState_name:\"已审批\",\r\n confirmState_name:\"执行中\",\r\n closeState_name:\"未关闭\",\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 approvalState_name:\"未审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\r\n key: \"8\"\r\n },\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;\r\n }\r\n}\r\n\r\n","desc":" 设置`scroll.y`指定滚动区域的高度，达到固定表头效果"},{"example":<Demo0104 />,"title":" 隔行换色","code":"/**\n*\n* @title 隔行换色\n* @parent 基础 Basic\n* @description 可自定义斑马线颜色\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns04 = [\n {\n title: \"员工姓名\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"年龄\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"住址\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data04 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo04 extends Component {\n render() {\n return <Table \n className=\"demo04\" \n columns={columns04} \n data={data04} />\n }\n}\n\n","desc":" 可自定义斑马线颜色","scss_code":".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}"},{"example":<Demo0105 />,"title":" 表格 Loading 加载","code":"/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @parent 基础 Basic\r\n* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\n\r\nconst columns05 = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",fixed:'left'},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data05 = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n <div>\r\n <Button\r\n className=\"editable-add-btn\"\r\n onClick={this.changeLoading}\r\n >\r\n 切换loading\r\n </Button>\r\n <Table\r\n columns={columns05}\r\n data={data05}\r\n // loading={this.state.loading}或者是boolean\r\n loading={{show:this.state.loading}}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" loading可以传boolean或者object对象，object为bee-loading组件的参数类型"},{"example":<Demo0201 />,"title":" 横向滚动条","code":"/**\n*\n* @title 横向滚动条\n* @parent 滚动 Scroll View\n* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\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:true }} />\n );\n }\n}\n\n\n","desc":" 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值"},{"example":<Demo0202 />,"title":" 纵向滚动条","code":"/**\n*\n* @title 纵向滚动条\n* @parent 滚动 Scroll View\n* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns12 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data12 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\nclass Demo12 extends Component {\n render() {\n return (\n <Table bordered columns={columns12} data={data12} scroll={{y:150 }} />\n );\n }\n}\n\n\n","desc":" 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值"},{"example":<Demo0301 />,"title":" 渲染本地数据","code":"/**\n*\n* @title 渲染本地数据\n* @parent 数据操作 Data Opetation\n* @description 可自定义页头和页脚。\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\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: \"inline-block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n }}>{text}</span>\n </Tooltip>\n );\n }\n },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n];\nclass Demo21 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n title={currentData => <div>员工信息统计表</div>}\n footer={currentData => <div>合计: 共{data.length}条数据</div>}\n />\n );\n }\n}\n\n\n","desc":" 可自定义页头和页脚。"},{"example":<Demo0302 />,"title":" 渲染远程数据","code":"/**\n*\n* @title 渲染远程数据\n* @parent 数据操作 Data Opetation\n* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。\n*/\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport reqwest from 'reqwest';\nimport { Table } from 'tinper-bee';\n\nconst columns = [{\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n render: name => `${name.first} ${name.last}`,\n width: '20%',\n}, {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n}, {\n title: 'Email',\n dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [],\n loading: false,\n }\n }\n\n fetch = (params = {}) => {\n console.log('params:', params);\n this.setState({ loading: true });\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then((data) => {\n this.setState({\n loading: false,\n data: data.results,\n });\n });\n }\n\n render() {\n return (\n <div className=\"demo22\">\n <Button className=\"opt-btns\" colors=\"secondary\" onClick={() => this.fetch()}>点击加载远程数据</Button>\n <Table\n columns={columns}\n data={this.state.data}\n loading={this.state.loading}\n scroll={{y:200}}\n />\n </div>\n );\n }\n}\n\n\n","desc":" 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。","scss_code":".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}"},{"example":<Demo0402 />,"title":" 多列表头","code":"/**\r\n *\r\n * @title 多列表头\r\n * @parent 列渲染 Custom Render\r\n * @description columns[n] 可以内嵌 children，以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响\r\n *\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n <Table\r\n className={'demo32'}\r\n columns={columns}\r\n data={data}\r\n headerHeight={40} //自定义表头高度\r\n bordered\r\n scroll={{ y: 240 }}\r\n />\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" columns[n] 可以内嵌 children，以渲染分组表头。","scss_code":".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}"},{"example":<Demo0404 />,"title":" 数据关联","code":"/**\n*\n* @title 数据关联\n* @parent 列渲染 Custom Render\n* @description 数据行关联自定义菜单显示\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst { Item } = Menu;\n\nconst data = [\n { \n num:\"NU0391025\", \n name: \"aa\",\n sex: \"男\",\n dept:'财务二科', \n rank:\"T1\",\n year:\"1\",\n seniority:\"1\",\n key: \"1\"\n }, \n { \n num:\"NU0391026\", \n name: \"bb\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"M1\",\n year:\"1\",\n seniority:\"1\",\n key: \"2\"\n },\n { \n num:\"NU0391027\", \n name: \"dd\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"T2\",\n year:\"2\",\n seniority:\"2\",\n key: \"3\"\n }\n];\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\n\nclass Demo33 extends Component {\n constructor(props) {\n super(props);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onSelect = (item) => {\n console.log(item);\n }\n render() {\n const menu1 = (\n <Menu\n onSelect={this.onSelect}>\n <Item key=\"1\">模态弹出</Item>\n <Item key=\"2\">链接跳转</Item>\n <Item key=\"3\">打开新页</Item>\n </Menu>);\n let columns = [\n { title: \"关联\",dataIndex: \"link\",key: \"link\",width: 80, \n render: (text, record, index) => {\n return (\n <Dropdown\n trigger={['click']}\n overlay={menu1}\n animation=\"slide-up\"\n >\n <Icon type=\"uf-link\" style={{color:'rgb(0, 72, 152)'}}></Icon>\n </Dropdown>\n )\n }\n },\n { title: \"员工编号\",dataIndex: \"num\",key: \"num\",width: 200 },\n { title: \"员工姓名\",dataIndex: \"name\",key: \"name\", width: 200},\n { title: \"员工性别\",dataIndex: \"sex\",key: \"sex\",width: 200 },\n { title: \"部门\",dataIndex: \"dept\",key: \"dept\",width: 200},\n { title: \"职级\",dataIndex: \"rank\",key: \"rank\",width: 200},\n { title: \"工龄\",dataIndex: \"year\",key: \"year\",width: 200},\n { title: \"司龄\",dataIndex: \"seniority\",key: \"seniority\",width: 200}\n ];\n return <ComplexTable \n bordered\n columns={columns} \n data={data} \n multiSelect={{type: \"checkbox\"}}\n getSelectedDataFunc={this.getSelectedDataFunc}\n />\n }\n}\n\n","desc":" 数据行关联自定义菜单显示"},{"example":<Demo0405 />,"title":" 列合计（总计）","code":"/**\n *\n * @title 列合计（总计）\n * @parent 列渲染 Custom Render\n * @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Button,Checkbox} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\n \nlet ComplexTable = multiSelect(sum(Table), Checkbox);\n\nconst columns = [\n {\n title: \"单据编号\",\n dataIndex: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"业务类型\",\n dataIndex: \"type\",\n key: \"type\",\n width: 200\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"仓库\",\n dataIndex: \"warehouse\",\n key: \"warehouse\",\n width: 80,\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 100,\n sumCol: true\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sumCol: true\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n num: \"NU039100\"+i,\n date: \"2019-03-01\",\n type: \"普通采购\",\n supplier: \"gys\"+i,\n contact: \"Tom\",\n warehouse: \"普通仓\",\n total: i + Math.floor(Math.random()*10),\n money: 20 * Math.floor(Math.random()*10)\n });\n }\n return data;\n}\n\nclass Demo35 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData()\n };\n }\n\n changeData = ()=>{\n this.setState({\n data: getData()\n });\n }\n\n render() {\n const {data} = this.state;\n return (\n <div>\n <Button \n className=\"editable-add-btn\"\n onClick={this.changeData}\n >\n 动态设置数据源\n </Button>\n\n <ComplexTable \n columns={columns}\n data={data}\n bordered\n // scroll={{ x: \"130%\", y: 140 }}\n />\n </div>\n );\n }\n}\n\n","desc":" 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。"},{"example":<Demo0501 />,"title":" 编辑态表格","code":"/**\n*\n* @title 编辑态表格\n* @parent 编辑 Editor\n* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）\n*\n*/\n\nimport React from \"react\";\nimport {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from \"tinper-bee\";\nimport { Table, Datepicker } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderDate from \"tinper-bee/lib/DateRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, FormControl, Icon);\nconst DateRender = renderDate(Datepicker, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\nconst dataSource = [\n {\n key: \"boyuzhou\",\n value: \"jack\"\n },\n {\n key: \"renhualiu\",\n value: \"lucy\"\n },\n {\n key: \"yuzhao\",\n value: \"yiminghe\"\n }\n];\nclass Demo41 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"150px\",\n render: (text, record, index) => (\n <InputRender\n name=\"name\"\n placeholder=\"请输入姓名\"\n value={text}\n isclickTrigger={true}\n check={this.check}\n onChange={this.onInputChange(index, \"name\")}\n isRequire={true}\n method=\"blur\"\n errorMessage={\n <Tooltip overlay={\"错误提示\"}>\n <Icon type=\"uf-exc-c\" className=\"\" />\n </Tooltip>\n }\n />\n )\n },\n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n <InputRender\n format=\"Currency\"\n name=\"number\"\n placeholder=\"请输入货币\"\n value={text}\n isclickTrigger={true}\n check={this.check}\n onChange={this.onInputChange(index, \"number\")}\n isRequire={true}\n method=\"blur\"\n errorMessage={\n <Tooltip overlay={\"错误提示\"}>\n <Icon type=\"uf-exc-c\" className=\"\" />\n </Tooltip>\n }\n reg={/^[0-9]+$/}\n />\n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n <Checkbox\n checked={record.age}\n onChange={this.onCheckChange(index, \"age\")}\n />\n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n <SelectRender\n dataSource={dataSource}\n isclickTrigger={true}\n value={text}\n onChange={this.onSelectChange(index, \"address\")}\n size=\"sm\"\n >\n <Option value=\"jack\">boyuzhou</Option>\n <Option value=\"lucy\">renhualiu</Option>\n <Option value=\"disabled\" disabled>\n Disabled\n </Option>\n <Option value=\"yiminghe\">yuzhao</Option>\n </SelectRender>\n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n <DateRender\n value={text}\n isclickTrigger={true}\n format={format}\n onSelect={this.onDateSelect}\n onChange={this.onDateChange}\n placeholder={dateInputPlaceholder}\n />\n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n <DateRender\n value={text}\n type=\"MonthPicker\"\n isclickTrigger={true}\n format={format2}\n onSelect={this.onSelect}\n onChange={this.onChange}\n placeholder={dateInputPlaceholder2}\n />\n );\n }\n }\n ];\n }\n check = (flag, obj) => {\n console.log(flag);\n console.log(obj);\n };\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = (index, key) => {\n return value => {\n console.log(`selected ${value}`);\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n <Animate\n transitionName=\"move\"\n component=\"tbody\"\n className={body.props.className}\n >\n {body.props.children}\n </Animate>\n );\n };\n getData = () => {\n console.log(this.state.dataSource);\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n <div>\n <Button\n className=\"editable-add-btn\"\n onClick={this.handleAdd}\n >\n 添加一行\n </Button>\n <Button\n style={{marginLeft:\"5px\"}}\n className=\"editable-add-btn\"\n onClick={this.getData}\n >\n 获取数据\n </Button>\n <Table\n data={dataSource}\n columns={columns}\n getBodyWrapper={this.getBodyWrapper}\n />\n </div>\n );\n }\n}\n\n\n","desc":" 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）"},{"example":<Demo0502 />,"title":" 单元格编辑","code":"/**\n *\n * @title 单元格编辑\n * @description 可以对单元格进行编辑的表格，示例中给出输入框+必填校验、下拉框编辑模式，以及输入模式的必填校验。\n *\n */\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\nimport { Table } from \"tinper-bee\";\nimport { Icon, Select, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\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 }\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 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 className=\"editable-cell-input-wrapper\">\n <input\n className=\"u-form-control\"\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 placement=\"bottom\"\n overlay={\n <div className=\"help-tip\">\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 dataSource = [\n { name: \"全能法戒\", quality: \"远古传奇\", level: 70.11 },\n { name: \"绝命\", quality: \"太古传奇\", level: 70 },\n { name: \"蚀刻符印\", quality: \"太古传奇\", level: 70 },\n { name: \"虹光\", quality: \"传奇\", level: 70 },\n { name: \"复仇者护腕\", quality: \"传奇\", level: 70 }\n];\n\nclass Demo501 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"装备名称\",\n dataIndex: \"name\",\n key: \"name\",\n render: (text, record, index) => (\n <StringEditCell\n value={text}\n colName={\"装备名称\"}\n onChange={this.onCellChange(index, \"name\")}\n />\n )\n },\n {\n title: \"品质\",\n dataIndex: \"quality\",\n key: \"quality\",\n render: (text, record, index) => (\n <SelectEditCell\n value={text}\n onChange={this.onCellChange(index, \"quality\")}\n />\n )\n },\n {\n title: \"需求等级\",\n dataIndex: \"level\",\n key: \"level\"\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=\"demo501\">\n <Table data={this.state.dataSource} columns={this.columns} />\n </div>\n );\n }\n}\n\n\n","desc":" 可以对单元格进行编辑的表格，示例中给出输入框+必填校验、下拉框编辑模式，以及输入模式的必填校验。","scss_code":".demo501 {\n .editable-cell-text-wrapper {\n &:hover {\n border: 1px dashed #A5ADBA;\n }\n }\n .require {\n position: absolute;\n top: 2px;\n color: red;\n font-size: 20px;\n }\n}\n.help-tip {\n color: #F44336;\n}\n.tooltip-arrow {\n border-bottom-color: #F44336 !important;\n}\n.tooltip-inner {\n border-color: #F44336 !important;\n}"},{"example":<Demo0601 />,"title":" 左侧固定列","code":"/**\n*\n* @title 左侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的左侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\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\n","desc":" 固定列到表格的左侧"},{"example":<Demo0602 />,"title":" 右侧固定列","code":"/**\n*\n* @title 右侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的右侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \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 + '行，内容为:' + text}>\n <a href=\"javascript:;\" tooltip={text} >\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\nclass Demo52 extends Component {\n render() {\n return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }} />;\n }\n}\n\n","desc":" 固定列到表格的右侧"},{"example":<Demo0603 />,"title":" 动态设置列锁定、解除锁定","code":"/**\n*\n* @title 动态设置列锁定、解除锁定\n* @parent 列操作-锁定 Fixed\n* @description 动态设置columns中数据的fixed属性值【fixed: \"left\"，fixed: \"right\"】。\n*\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\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: 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\n","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*\n*/\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns26 = [\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 data26 = [\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 Demo26 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={columns26}\n data={data26} />;\n }\n}\n\n","desc":" 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。"},{"example":<Demo0702 />,"title":" 复杂表格中行过滤","code":"/**\n*\n* @title 复杂表格中行过滤\n* @parent 列操作-过滤 Filter\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n*\n*/\n\n/**\n * @description \n */\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\nconst data27 = [\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 Demo27 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 onClick = (item) => {\n console.log(item);\n }\n\n render() {\n const menu1 = (\n <Menu onClick={this.onClick} style={{ width: 240 }} mode=\"vertical\" >\n <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\n <MenuItemGroup title=\"Item 1\">\n <Menu.Item key=\"1\">选项 1</Menu.Item>\n <Menu.Item key=\"2\">选项 2</Menu.Item>\n </MenuItemGroup>\n <MenuItemGroup title=\"Iteom 2\">\n <Menu.Item key=\"3\">选项 3</Menu.Item>\n <Menu.Item key=\"4\">选项 4</Menu.Item>\n </MenuItemGroup>\n </SubMenu>\n </Menu>)\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\n {\n title: \"\", width: 40, dataIndex: \"key\", key: \"key\", render: (text, record, index) => {\n return <Dropdown\n trigger={['click']}\n overlay={menu1}\n animation=\"slide-up\"\n >\n <Icon style={{ \"visibility\": \"hidden\" }} type=\"uf-eye\" />\n </Dropdown>\n }\n },\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={columns27}\n data={data27} />;\n }\n}\n\n","desc":" 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等"},{"example":<Demo0802 />,"title":" 列过滤面板","code":"/**\n*\n* @title 列过滤面板\n* @parent 列操作-隐藏 Hide\n* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/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 },\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 }\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;\n","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*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\n\nlet ComplexTable = sort(Table, Icon);\nconst 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\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', 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\n","desc":" column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称"},{"example":<Demo0902 />,"title":" 后端列排序","code":"/**\n* @title 后端列排序\n* @parent 列操作-排序 Sort\n* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\nlet ComplexTable = sort(Table, Icon);\n\nconst 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\nconst 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];\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\n","desc":" 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序"},{"example":<Demo0903 />,"title":" 多列排序","code":"/**\n *\n * @title 多列排序\n * @parent 列操作-排序 Sort\n * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox,Button,Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\nimport sort from \"tinper-bee/lib/sort.js\";;\nimport sum from \"tinper-bee/lib/sum.js\";;\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n className:'dfasd',\n width: 200\n },\n {\n title: \"功力指数\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\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: (a, b) => a.c - b.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: (a, b) => a.c - b.c,\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: 675, c: 30, d: \"内行\",e:100, key: \"2\" },\n { a: \"令狐冲\", b: 43, c: 41, d: \"大侠\",e:90, key: \"1\" },\n { a: \"令狐冲1\", b: 43, c: 81, d: \"大侠\", e:120,key: \"4\" },\n { a: \"令狐冲2\", b: 43, c: 81, d: \"大侠\", e:130,key: \"5\" },\n { a: \"郭靖\", b: 153, c: 25, d: \"大侠\",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 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}\n","desc":" 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。"},{"example":<Demo1001 />,"title":" 拖拽改变列顺序","code":"/**\n*\n* @title 拖拽改变列顺序\n* @parent 列操作-拖拽 Drag\n* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/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: 200,\n }\n];\n\nconst data = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 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 onDrop ={(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\nDemo22.defaultProps = defaultProps22;\n","desc":" 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。"},{"example":<Demo1002 />,"title":" 拖拽改变列宽度","code":"/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\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 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\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return <DragColumnTable \n columns={columns23} \n data={data23} \n bordered\n dragborder={true} \n draggable={true} \n scroll={{y:200}}\n onDropBorder ={(e,width)=>{\n console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n","desc":" onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。"},{"example":<Demo1101 />,"title":" 嵌套子表格","code":"/**\n*\n* @title 嵌套子表格\n* @parent 扩展行 Expanded Row\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Popconfirm } from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\nconst DragColumnTable = dragColumn(Table);\nconst columns16 = [\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:;\" 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 },\n \n];\nconst columns17 = [\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:;\" tooltip={text} >\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 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\n\nclass Demo16 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{}\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 42 * (this.state.data_obj[record.key].length+ 2);\n \n return (\n <Table\n columns={columns17}\n style={{height:height}}\n data={this.state.data_obj[record.key]} \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 ]\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 <DragColumnTable\n columns={columns16}\n data={data16}\n onExpand={this.getData}\n expandedRowRender={this.expandedRowRender}\n scroll={{x:true}}\n dragborder={true} \n draggable={true} \n />\n );\n }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格"},{"example":<Demo1102 />,"title":" 树型表格数据展示","code":"/**\n*\n* @title 树型表格数据展示\n* @parent 扩展行 Expanded Row\n* @description 通过在data中配置children数据，来自动生成树形表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\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 \n columns={columns4} data={data4} />;\n }\n}\n\n\n","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*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip,} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\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\" },\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\n\r\n","desc":" 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。"},{"example":<Demo1105 />,"title":" 紧凑型、宽松型","code":"/**\n*\n* @title 紧凑型、宽松型\n* @parent 扩展行 Expanded Row\n* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip,Tag} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\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 { 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: '错误', \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: '正常', \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: '异常', \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\n\n","desc":" 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。"},{"example":<Demo1106 />,"title":" 自定义行高","code":"/**\n*\n* @title 自定义行高\n* @parent 扩展行 Expanded Row\n* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\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 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\n\n","desc":" 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。"},{"example":<Demo1107 />,"title":" 图片在表格中的展示","code":"/**\n*\n* @title 图片在表格中的展示\n* @parent 扩展行 Expanded Row\n* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\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: \"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 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\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 Demo105 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 hoverContent={this.getHoverContent}\n onRowHover={this.onRowHover}\n />\n );\n }\n}\n\n\n","desc":" 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer"},{"example":<Demo1108 />,"title":" 自定义行、列合并","code":"/**\n*\n* @title 自定义行、列合并\n* @parent 扩展行 Expanded Row\n* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\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: 'Name',\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: 'Age',\n key: \"Age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: 'Home phone',\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: 'Phone',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: 'Address',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\nconst data = [{\n key: '1',\n name: 'John Brown',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: 'New York No. 1 Lake Park',\n}, {\n key: '2',\n name: 'Jim Green',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: 'London No. 1 Lake Park',\n}, {\n key: '3',\n name: 'Joe Black',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Sidney No. 1 Lake Park',\n}, {\n key: '4',\n name: 'Jim Red',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'London No. 2 Lake Park',\n}, {\n key: '5',\n name: 'Jake White',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Dublin No. 2 Lake Park',\n}];\n\nclass Demo15 extends Component {\n render() {\n return (\n <Table columns={columns} data={data} bordered/>\n );\n }\n}\n\n\n\n","desc":" 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。"},{"example":<Demo1301 />,"title":" 多选表格","code":"/**\r\n*\r\n* @title 多选表格\r\n* @parent 行操作-选择\r\n* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport {Checkbox} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n\r\nconst columns12 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst data12 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\",_checked:true },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" ,_checked:false},\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" ,_checked:false},\r\n { a: \"郭靖1\", b: \"男\", c: 25,d:'大侠', key: \"4\" ,_disabled:true},\r\n { a: \"郭靖2\", b: \"男\", c: 25,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: data12\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 如果在回调中增加setState逻辑，需要同步data中的_checked属性。即下面的代码\r\n // const allChecked = selectedList.length == 0?false:true;\r\n // record为undefind则为全选或者全不选\r\n // if(!record){\r\n // data12.forEach(item=>{\r\n // item._checked = allChecked;\r\n // })\r\n // }else{\r\n // data12[index]['_checked'] = record._checked;\r\n // } \r\n\r\n \r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n <MultiSelectTable \r\n columns={columns12} \r\n data={data12} \r\n multiSelect={multiObj}\r\n rowClassName={(record,index,indent)=>{\r\n if (record._checked) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。"},{"example":<Demo1401 />,"title":" 万行以上数据渲染","code":"/**\n*\n* @title 万行以上数据渲染\n* @parent 无限滚动 Infinite-scroll\n* @description 万行数据渲染\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/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: \"inline-block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\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 render() {\n return (\n <BigDataTable\n columns={columns}\n data={data}\n scroll={{y:300}}\n onRowClick={(record, index, indent) => {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n","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参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/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\n\n","desc":" 通过expandedRowRender参数来实现子表格"},{"example":<Demo1403 />,"title":" 多功能表格滚动加载","code":"/**\n*\n* @title 多功能表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip,Checkbox,Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/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: \"inline-block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\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 Demo32 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\n\n","desc":""},{"example":<Demo1404 />,"title":" 层级树大数据场景","code":"/**\n* @title 层级树大数据场景\n* @parent 无限滚动 Infinite-scroll\n* @description\n*/\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/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 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: \"inline-block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\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(1000) ].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 }\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\n\nclass Demo34 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n onExpandedRowsChange = (params)=>{\n console.log(params);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n <BigDataTable\n columns={columns}\n data={data}\n parentNodeId='parent'\n scroll={{y:300}}\n onExpand={this.onExpand}\n onRowClick={(record, index, indent) => {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n","desc":""},{"example":<Demo1601 />,"title":" 表格+分页","code":"/**\n * @title 表格+分页\n * @parent 分页 Pagination\n * @description 点击分页联动表格\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns8 = [\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 title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst pageData = {\n 1: [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n ],\n 2: [\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\n { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\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={columns8} 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 total={100}\n dataNum={2}\n />\n </div>\n );\n }\n}\n\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}"},{"example":<Demo1602 />,"title":" 表格+搜索","code":"/**\n *\n * @title 表格+搜索\n * @parent 搜索 search\n * @description 搜索刷新表格数据\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Icon,FormControl,InputGroup} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let { onSearch } = this.props;\n this.setState({\n empty: true\n });\n onSearch && onSearch(this.state.searchValue);\n };\n\n /**\n * 捕获回车\n * @param e\n */\n handleKeyDown = e => {\n if (e.keyCode === 13) {\n this.handleSearch();\n }\n };\n\n /**\n * 输入框改变\n * @param e\n */\n handleChange = (e) => {\n this.setState({\n searchValue: e\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let { onEmpty } = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n <InputGroup simple className=\"search-component\">\n <FormControl\n onChange={this.handleChange}\n value={this.state.searchValue}\n onKeyDown={this.handleKeyDown}\n placeholder=\"请输入用户名\"\n type=\"text\"\n />\n {this.state.empty ? (\n <Icon\n type=\"uf-close-c\"\n onClick={this.emptySearch}\n className=\"empty-search\"\n />\n ) : null}\n\n <InputGroup.Button onClick={this.handleSearch} shape=\"border\">\n <Icon type=\"uf-search\" />\n </InputGroup.Button>\n </InputGroup>\n );\n }\n}\n\nconst columns9 = [\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 },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst userData = [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: userData\n };\n }\n\n handleSearch = value => {\n if (value === \"\") {\n return this.setState({\n data: userData\n });\n }\n let regExp = new RegExp(value, \"ig\");\n let data = userData.filter(item => regExp.test(item.a));\n this.setState({\n data\n });\n };\n\n handleEmpty = () => {\n this.setState({\n data: userData\n });\n };\n\n render() {\n return (\n <div>\n <div className=\"clearfix\">\n <Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />\n </div>\n <Table columns={columns9} data={this.state.data} />\n </div>\n );\n }\n}\n\n\n","desc":" 搜索刷新表格数据"}]
|
||
|
||
|
||
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'));
|