员工信息统计表
}\n footer={currentData => 合计: 共{data.length}条数据
}\n />\n );\n }\n}\n\nexport default Demo21;\n","desc":" 可自定义页头和页脚。"},{"example":\n \n
\n );\n }\n}\n\nexport default Demo22;\n","desc":" 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。","scss_code":".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}"},{"example":\n
\n );\n }\n}\nexport default Demo35;\n","desc":" 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。"},{"example":总计: {_sum}
}\n />\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n return editable ? (\n \n {\"请输入\" + colName}
}\n >\n \n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n return editable ? (\n \n \n
\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n 取消\n \n \n
\n ) : (\n \n \n \n
\n );\n };\n\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n );\n }\n}\n\nexport default Demo0501;\n","desc":" 可以对行进行编辑的表格","scss_code":".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":\n {editable ? (\n
\n ) : (\n this.editWarp = el} className=\"editable-cell-input-wrapper\">\n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n {value || \" \"}\n
\n )}\n \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 \n {editable ? (\n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: this.props.value.d,\n editable: false\n };\n this.refWarp = React.createRef();\n }\n\n edit = () => {\n this.setState({ editable: true }, () => this.refWarp.focus());\n };\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n onRefBlur = e => {\n // 消除点击子组件，父组件先失焦再聚焦的事件触发过程带来的副作用\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\n this.commitChange();\n }\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, editable } = this.state;\n return editable ? (\n \n \n {SELECT_SOURCE.map((item, index) => (\n \n ))}\n \n
\n ) : (\n \n {value || \" \"}\n
\n )}\n \n {value.name || \" \"}\n
\n );\n }\n }\n);\n\nconst dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0502 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n \n \n );\n }\n}\n\nexport default Demo0502;\n","desc":" 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）","scss_code":".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":
\n \n \n 一些操作\n \n \n
\n )\n }\n }\n];\n\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"4\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"6\"\n }\n];\n\nclass Demo52 extends Component {\n render() {\n return \n
\n
\n )\n }\n}\n\nexport default Demo24;","desc":" 动态设置columns中数据的fixed属性值【fixed: \"left\"，fixed: \"right\"】。","scss_code":"th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n"},{"example":\n \n
\n );\n }\n}\nexport default Demo13;","desc":" 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。"},{"example":宽松型表格
\n\n \n
\n
\n \n );\n }\n}\n\n\nexport default Demo15;\n","desc":" 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。"},{"example":\n {\n console.log('currentIndex--'+index);\n }}\n onBodyScroll={this.handleBodyScroll}\n />\n
\n );\n }\n}\n\nexport default Demo30;","desc":" 万行数据渲染","scss_code":".big-data tr td {\n // height: 48px;\n}"},{"example":\n \n {\n console.log('currentIndex--' + index);\n }}\n rowKey=\"key\"//每条数据的唯一标示，默认为key，如果不是key，必须传\n />\n
\n\n );\n }\n}\n\nexport default Demo34;","desc":""},{"example":\n
\n
\n );\n }\n}\nexport default Demo8;\n","desc":" 点击分页联动表格","scss_code":".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}"}]
+var Demo0101 = require("./demolist/Demo0101");var Demo0102 = require("./demolist/Demo0102");var Demo0103 = require("./demolist/Demo0103");var Demo0104 = require("./demolist/Demo0104");var Demo0105 = require("./demolist/Demo0105");var Demo0106 = require("./demolist/Demo0106");var Demo0107 = require("./demolist/Demo0107");var Demo0201 = require("./demolist/Demo0201");var Demo0202 = require("./demolist/Demo0202");var Demo0301 = require("./demolist/Demo0301");var Demo0302 = require("./demolist/Demo0302");var Demo0402 = require("./demolist/Demo0402");var Demo0404 = require("./demolist/Demo0404");var Demo0405 = require("./demolist/Demo0405");var Demo0406 = require("./demolist/Demo0406");var Demo0501 = require("./demolist/Demo0501");var Demo0502 = require("./demolist/Demo0502");var Demo0503 = require("./demolist/Demo0503");var Demo0505 = require("./demolist/Demo0505");var Demo0601 = require("./demolist/Demo0601");var Demo0602 = require("./demolist/Demo0602");var Demo0603 = require("./demolist/Demo0603");var Demo0701 = require("./demolist/Demo0701");var Demo0702 = require("./demolist/Demo0702");var Demo0802 = require("./demolist/Demo0802");var Demo0901 = require("./demolist/Demo0901");var Demo0902 = require("./demolist/Demo0902");var Demo0903 = require("./demolist/Demo0903");var Demo1001 = require("./demolist/Demo1001");var Demo1002 = require("./demolist/Demo1002");var Demo1101 = require("./demolist/Demo1101");var Demo1102 = require("./demolist/Demo1102");var Demo1103 = require("./demolist/Demo1103");var Demo1105 = require("./demolist/Demo1105");var Demo1106 = require("./demolist/Demo1106");var Demo1107 = require("./demolist/Demo1107");var Demo1108 = require("./demolist/Demo1108");var Demo1201 = require("./demolist/Demo1201");var Demo1301 = require("./demolist/Demo1301");var Demo1302 = require("./demolist/Demo1302");var Demo1401 = require("./demolist/Demo1401");var Demo1402 = require("./demolist/Demo1402");var Demo1403 = require("./demolist/Demo1403");var Demo1404 = require("./demolist/Demo1404");var Demo1601 = require("./demolist/Demo1601");var DemoArray = [{"example":\r\n \r\n 切换loading\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Demo05;\r\n","desc":" loading可以传boolean或者object对象，object为bee-loading组件的参数类型"},{"example":员工信息统计表
}\n footer={currentData => 合计: 共{data.length}条数据
}\n />\n );\n }\n}\n\nexport default Demo21;\n","desc":" 可自定义页头和页脚。"},{"example":\n \n
\n );\n }\n}\n\nexport default Demo22;\n","desc":" 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。","scss_code":".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}"},{"example":\n
\n );\n }\n}\nexport default Demo35;\n","desc":" 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。"},{"example":总计: {_sum}
}\n />\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n return editable ? (\n \n {\"请输入\" + colName}
}\n >\n \n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n return editable ? (\n \n \n
\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n 取消\n \n \n
\n ) : (\n \n \n \n
\n );\n };\n\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n );\n }\n}\n\nexport default Demo0501;\n","desc":" 可以对行进行编辑的表格","scss_code":".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":\n {editable ? (\n
\n ) : (\n this.editWarp = el} className=\"editable-cell-input-wrapper\">\n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n {value || \" \"}\n
\n )}\n \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 \n {editable ? (\n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: this.props.value.d,\n editable: false\n };\n this.refWarp = React.createRef();\n }\n\n edit = () => {\n this.setState({ editable: true }, () => this.refWarp.focus());\n };\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n onRefBlur = e => {\n // 消除点击子组件，父组件先失焦再聚焦的事件触发过程带来的副作用\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\n this.commitChange();\n }\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, editable } = this.state;\n return editable ? (\n \n \n {SELECT_SOURCE.map((item, index) => (\n \n ))}\n \n
\n ) : (\n \n {value || \" \"}\n
\n )}\n \n {value.name || \" \"}\n
\n );\n }\n }\n);\n\nconst dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0502 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n \n \n );\n }\n}\n\nexport default Demo0502;\n","desc":" 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）","scss_code":".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":
\n \n \n 一些操作\n \n \n
\n )\n }\n }\n];\n\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"4\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"6\"\n }\n];\n\nclass Demo52 extends Component {\n render() {\n return \n
\n
\n )\n }\n}\n\nexport default Demo24;","desc":" 动态设置columns中数据的fixed属性值【fixed: \"left\"，fixed: \"right\"】。","scss_code":"th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n"},{"example":\n \n
\n );\n }\n}\nexport default Demo13;","desc":" 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。"},{"example":宽松型表格
\n\n \n
\n
\n \n );\n }\n}\n\n\nexport default Demo15;\n","desc":" 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。"},{"example":\n {\n console.log('currentIndex--'+index);\n }}\n onBodyScroll={this.handleBodyScroll}\n />\n
\n );\n }\n}\n\nexport default Demo30;","desc":" 万行数据渲染","scss_code":".big-data tr td {\n // height: 48px;\n}"},{"example":\n \n {\n console.log('currentIndex--' + index);\n }}\n rowKey=\"key\"//每条数据的唯一标示，默认为key，如果不是key，必须传\n />\n
\n\n );\n }\n}\n\nexport default Demo34;","desc":""},{"example":\n
\n
\n );\n }\n}\nexport default Demo8;\n","desc":" 点击分页联动表格","scss_code":".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}"}]
class Demo extends Component {
diff --git a/dist/demo.js b/dist/demo.js
index 5221821..f547f42 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -80,7 +80,7 @@
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
- var Demo0101 = __webpack_require__(606);var Demo0102 = __webpack_require__(607);var Demo0103 = __webpack_require__(608);var Demo0104 = __webpack_require__(609);var Demo0105 = __webpack_require__(610);var Demo0106 = __webpack_require__(613);var Demo0107 = __webpack_require__(614);var Demo0201 = __webpack_require__(615);var Demo0202 = __webpack_require__(616);var Demo0301 = __webpack_require__(617);var Demo0302 = __webpack_require__(618);var Demo0402 = __webpack_require__(621);var Demo0404 = __webpack_require__(624);var Demo0405 = __webpack_require__(628);var Demo0406 = __webpack_require__(630);var Demo0501 = __webpack_require__(631);var Demo0502 = __webpack_require__(633);var Demo0503 = __webpack_require__(634);var Demo0505 = __webpack_require__(635);var Demo0601 = __webpack_require__(636);var Demo0602 = __webpack_require__(637);var Demo0603 = __webpack_require__(638);var Demo0701 = __webpack_require__(639);var Demo0702 = __webpack_require__(640);var Demo0802 = __webpack_require__(641);var Demo0901 = __webpack_require__(646);var Demo0902 = __webpack_require__(647);var Demo0903 = __webpack_require__(648);var Demo1001 = __webpack_require__(649);var Demo1002 = __webpack_require__(650);var Demo1101 = __webpack_require__(651);var Demo1102 = __webpack_require__(652);var Demo1103 = __webpack_require__(653);var Demo1105 = __webpack_require__(654);var Demo1106 = __webpack_require__(655);var Demo1107 = __webpack_require__(656);var Demo1108 = __webpack_require__(657);var Demo1201 = __webpack_require__(658);var Demo1301 = __webpack_require__(661);var Demo1302 = __webpack_require__(662);var Demo1401 = __webpack_require__(668);var Demo1402 = __webpack_require__(670);var Demo1403 = __webpack_require__(671);var Demo1404 = __webpack_require__(672);var Demo1601 = __webpack_require__(673);var DemoArray = [{ "example": _react2['default'].createElement(Demo0101, null), "title": " 基本表格", "code": "/**\n*\n* @title 基本表格\n* @parent 基础 Basic\n* @description 当单元格内容过多时，会自动显示省略号，鼠标hover有提示。showRowNum 设置是否显示序号列。\n* demo0101\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0101 extends Component {\n render() {\n return (\n \r\n \r\n 切换loading\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Demo05;\r\n", "desc": " loading可以传boolean或者object对象，object为bee-loading组件的参数类型" }, { "example": _react2['default'].createElement(Demo0106, null), "title": " 单元格内容居中", "code": "/**\n*\n* @title 单元格内容居中\n* @parent 基础 Basic\n* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。\n* demo0106\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip } from 'tinper-bee';\n\n\n\nconst columns = [\n {\n title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 120, className: \"rowClassName\",\n fixed:'left',\n textAlign:'center',\n render: (text, record, index) => {\n return (\n 员工信息统计表
}\n footer={currentData => 合计: 共{data.length}条数据
}\n />\n );\n }\n}\n\nexport default Demo21;\n", "desc": " 可自定义页头和页脚。" }, { "example": _react2['default'].createElement(Demo0302, null), "title": " 渲染远程数据", "code": "/**\n*\n* @title 渲染远程数据\n* @parent 数据操作 Data Opetation\n* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。\n* demo0302\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\n\nimport reqwest from 'reqwest';\n\n\nconst columns = [{\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n render: name => `${name.first} ${name.last}`,\n width: '20%',\n}, {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n}, {\n title: 'Email',\n dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [],\n loading: false,\n }\n }\n\n fetch = (params = {}) => {\n console.log('params:', params);\n this.setState({ loading: true });\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then((data) => {\n this.setState({\n loading: false,\n data: data.results,\n });\n });\n }\n\n render() {\n return (\n \n \n
\n );\n }\n}\n\nexport default Demo22;\n", "desc": " 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。", "scss_code": ".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}" }, { "example": _react2['default'].createElement(Demo0402, null), "title": " 多列表头", "code": "/**\r\n *\r\n * @title 多列表头\r\n * @parent 列渲染 Custom Render\r\n * @description columns[n] 可以内嵌 children，以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响\r\n * 多列表头拖拽的时候,原则只拖拽叶子节点的表头。\r\n * demo0402\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\r\n\r\n\r\n\r\nimport dragColumn from 'bee-table/build/lib/dragColumn';\r\n\r\nconst columns = [\r\n {\r\n title: \"姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"个人信息\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"地址\",\r\n children: [\r\n {\r\n title: \"街道\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"单元\",\r\n children: [\r\n {\r\n title: \"楼号\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"门户\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"公司信息\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"公司地址\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"公司名称\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"北清路 68 号\",\r\n companyName: \"用友\",\r\n gender: \"男\"\r\n });\r\n}\r\n\r\nconst DragColumnTable = dragColumn(Table);\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n \n
\n );\n }\n}\nexport default Demo35;\n", "desc": " 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。" }, { "example": _react2['default'].createElement(Demo0406, null), "title": " 自定义整行和整列样式表格", "code": "/**\n *\n * @title 自定义整行和整列样式表格\n * @parent 列渲染 Custom Render\n * @description 某行或某列的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串。此demo展示自定义整行或整列的背景色和字体内容颜色。\n * demo0406\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100,style: {backgroundColor:'#e3f2fd',color:'#505F79'}},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" ,style:{backgroundColor:'#ffebee',color:'#000'}},\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0406 extends Component {\n render() {\n return (\n 总计: {_sum}
}\n />\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n return editable ? (\n \n {\"请输入\" + colName}
}\n >\n \n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n return editable ? (\n \n \n
\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n 取消\n \n \n
\n ) : (\n \n \n \n
\n );\n };\n\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n );\n }\n}\n\nexport default Demo0501;\n", "desc": " 可以对行进行编辑的表格", "scss_code": ".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}" }, { "example": _react2['default'].createElement(Demo0502, null), "title": " 单元格编辑", "code": "/**\n *\n * @title 单元格编辑\n * @parent 编辑 Editor\n * @description 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）\n * demo0502\n */\nimport React, { Component } from \"react\";\nimport { Table, Icon, Select, Tooltip, Form } from 'tinper-bee';\n\n\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n this.editWarp = React.createRef();\n }\n\n commitChange = () => {\n if (this.state.value === \"\") return;\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.commitChange();\n }\n };\n\n handleChange = e => {\n if (e.target.value === \"\") this.editWarp.className += \" verify-cell\";\n this.setState({ value: e.target.value });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
\n ) : (\n this.editWarp = el} className=\"editable-cell-input-wrapper\">\n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n {value || \" \"}\n
\n )}\n \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 \n {editable ? (\n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: this.props.value.d,\n editable: false\n };\n this.refWarp = React.createRef();\n }\n\n edit = () => {\n this.setState({ editable: true }, () => this.refWarp.focus());\n };\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n onRefBlur = e => {\n // 消除点击子组件，父组件先失焦再聚焦的事件触发过程带来的副作用\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\n this.commitChange();\n }\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, editable } = this.state;\n return editable ? (\n \n \n {SELECT_SOURCE.map((item, index) => (\n \n ))}\n \n
\n ) : (\n \n {value || \" \"}\n
\n )}\n \n {value.name || \" \"}\n
\n );\n }\n }\n);\n\nconst dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0502 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n \n \n );\n }\n}\n\nexport default Demo0502;\n", "desc": " 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）", "scss_code": ".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}" }, { "example": _react2['default'].createElement(Demo0503, null), "title": " 弹框（表单）编辑", "code": "/**\n *\n * @title 弹框（表单）编辑\n * @parent 编辑 Editor\n * @description 以弹框形式以对行进行编辑的表格\n * demo0503\n */\n\nimport React, { Component, PureComponent } from \"react\";\nimport { Table } from 'tinper-bee';\n\nimport {\n Select, Form, FormControl, Button, Icon,\n Tooltip, Modal, FormGroup, Label, Row, Col\n} from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nfunction handleFormValueChange(WarpCompProps, field, allFields) {\n const { onChange, throwError } = WarpCompProps;\n if (field.value === \"\") return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(field.value);\n}\n\nconst StringEditCell = Form.createForm({\n onValuesChange: handleFormValueChange\n})(PureStringEditCell);\n\nfunction PureStringEditCell(props) {\n const { getFieldProps, getFieldError } = props.form;\n const { value, required } = props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n
\n \n \n 一些操作\n \n \n
\n )\n }\n }\n];\n\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"4\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"6\"\n }\n];\n\nclass Demo52 extends Component {\n render() {\n return \n
\n
\n )\n }\n}\n\nexport default Demo24;", "desc": " 动态设置columns中数据的fixed属性值【fixed: \"left\"，fixed: \"right\"】。", "scss_code": "th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n" }, { "example": _react2['default'].createElement(Demo0701, null), "title": " 按条件、值过滤", "code": "/**\n*\n* @title 按条件、值过滤\n* @parent 列操作-过滤 Filter\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。\n* demo0701\n*/\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst 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 \n \n
\n );\n }\n}\nexport default Demo13;", "desc": " 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。" }, { "example": _react2['default'].createElement(Demo1001, null), "title": " 拖拽改变列顺序", "code": "/**\n*\n* @title 拖拽改变列顺序\n* @parent 列操作-拖拽 Drag\n* @description 点击选择表头并左右拖拽，可以改变表格列顺序。 onDragEnd 方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。\n* demo1001\n*/\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee';\n\n\n \nimport dragColumn from 'bee-table/build/lib/dragColumn';\n\nconst columns = [\n {\n title: \"订单编号\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"单据日期\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"供应商\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"联系人\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n },\n {\n title: \"操作\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n fixed: 'right',\n }\n];\n\nconst data = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: 'xx供应商',d:'Tom',e:'...', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: 'yy供应商',d:'Jack',e:'...', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: 'zz供应商',d:'Jane',e:'...', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return 宽松型表格
\n\n \n
\n
\n \n );\n }\n}\n\n\nexport default Demo15;\n", "desc": " 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。" }, { "example": _react2['default'].createElement(Demo1201, null), "title": " 拖拽改变行顺序", "code": "/**\n*\n* @title 拖拽改变行顺序\n* @parent 行操作-拖拽\n* @description `rowDraggAble`参数设置是否使用行交换顺序功能，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* Demo1201\n*/\n\nimport React, { Component } from \"react\";\nimport { Switch, Table } from 'tinper-bee';\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:200 },\n { title: \"系统权限\", dataIndex: \"c\", key: \"c\", width: 200,render:()=>{return(\n {\n console.log('currentIndex--'+index);\n }}\n onBodyScroll={this.handleBodyScroll}\n />\n
\n );\n }\n}\n\nexport default Demo30;", "desc": " 万行数据渲染", "scss_code": ".big-data tr td {\n // height: 48px;\n}" }, { "example": _react2['default'].createElement(Demo1402, null), "title": " 嵌套子表格滚动加载", "code": "/**\n*\n* @title 嵌套子表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description 通过expandedRowRender参数来实现子表格。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* demo1402\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Popconfirm } from 'tinper-bee';\n\n\nimport BigData from \"bee-table/build/lib/bigData\";\nconst BigDataTable = BigData(Table);\nconst outColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n \n \n {\n console.log('currentIndex--' + index);\n }}\n rowKey=\"key\"//每条数据的唯一标示，默认为key，如果不是key，必须传\n />\n
\n\n );\n }\n}\n\nexport default Demo34;", "desc": "" }, { "example": _react2['default'].createElement(Demo1601, null), "title": " 表格+分页", "code": "/**\n * @title 表格+分页\n * @parent 分页 Pagination\n * @description 点击分页联动表格\n * demo1601\n */\n\nimport React, { Component } from \"react\";\nimport { Table, Pagination } from 'tinper-bee';\n\n\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst pageData = {\n 1: [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n ],\n 2: [\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" },\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n \n
\n
\n );\n }\n}\nexport default Demo8;\n", "desc": " 点击分页联动表格", "scss_code": ".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}" }];
+ var Demo0101 = __webpack_require__(606);var Demo0102 = __webpack_require__(607);var Demo0103 = __webpack_require__(608);var Demo0104 = __webpack_require__(609);var Demo0105 = __webpack_require__(610);var Demo0106 = __webpack_require__(613);var Demo0107 = __webpack_require__(614);var Demo0201 = __webpack_require__(615);var Demo0202 = __webpack_require__(616);var Demo0301 = __webpack_require__(617);var Demo0302 = __webpack_require__(618);var Demo0402 = __webpack_require__(621);var Demo0404 = __webpack_require__(624);var Demo0405 = __webpack_require__(628);var Demo0406 = __webpack_require__(630);var Demo0501 = __webpack_require__(631);var Demo0502 = __webpack_require__(633);var Demo0503 = __webpack_require__(634);var Demo0505 = __webpack_require__(635);var Demo0601 = __webpack_require__(636);var Demo0602 = __webpack_require__(637);var Demo0603 = __webpack_require__(638);var Demo0701 = __webpack_require__(639);var Demo0702 = __webpack_require__(640);var Demo0802 = __webpack_require__(641);var Demo0901 = __webpack_require__(646);var Demo0902 = __webpack_require__(647);var Demo0903 = __webpack_require__(648);var Demo1001 = __webpack_require__(649);var Demo1002 = __webpack_require__(650);var Demo1101 = __webpack_require__(651);var Demo1102 = __webpack_require__(652);var Demo1103 = __webpack_require__(653);var Demo1105 = __webpack_require__(654);var Demo1106 = __webpack_require__(655);var Demo1107 = __webpack_require__(656);var Demo1108 = __webpack_require__(657);var Demo1201 = __webpack_require__(658);var Demo1301 = __webpack_require__(661);var Demo1302 = __webpack_require__(662);var Demo1401 = __webpack_require__(668);var Demo1402 = __webpack_require__(670);var Demo1403 = __webpack_require__(671);var Demo1404 = __webpack_require__(672);var Demo1601 = __webpack_require__(673);var DemoArray = [{ "example": _react2['default'].createElement(Demo0101, null), "title": " 基本表格", "code": "/**\n*\n* @title 基本表格\n* @parent 基础 Basic\n* @description 当单元格内容过多时，会自动显示省略号，鼠标hover有提示。showRowNum 设置是否显示序号列。\n* demo0101\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0101 extends Component {\n render() {\n return (\n \r\n \r\n 切换loading\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Demo05;\r\n", "desc": " loading可以传boolean或者object对象，object为bee-loading组件的参数类型" }, { "example": _react2['default'].createElement(Demo0106, null), "title": " 单元格内容居中", "code": "/**\n*\n* @title 单元格内容居中\n* @parent 基础 Basic\n* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。\n* demo0106\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip } from 'tinper-bee';\n\n\n\nconst columns = [\n {\n title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 120, className: \"rowClassName\",\n fixed:'left',\n textAlign:'center',\n render: (text, record, index) => {\n return (\n 员工信息统计表
}\n footer={currentData => 合计: 共{data.length}条数据
}\n />\n );\n }\n}\n\nexport default Demo21;\n", "desc": " 可自定义页头和页脚。" }, { "example": _react2['default'].createElement(Demo0302, null), "title": " 渲染远程数据", "code": "/**\n*\n* @title 渲染远程数据\n* @parent 数据操作 Data Opetation\n* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。\n* demo0302\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\n\nimport reqwest from 'reqwest';\n\n\nconst columns = [{\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n render: name => `${name.first} ${name.last}`,\n width: '20%',\n}, {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n}, {\n title: 'Email',\n dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [],\n loading: false,\n }\n }\n\n fetch = (params = {}) => {\n console.log('params:', params);\n this.setState({ loading: true });\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then((data) => {\n this.setState({\n loading: false,\n data: data.results,\n });\n });\n }\n\n render() {\n return (\n \n \n
\n );\n }\n}\n\nexport default Demo22;\n", "desc": " 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。", "scss_code": ".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}" }, { "example": _react2['default'].createElement(Demo0402, null), "title": " 多列表头", "code": "/**\r\n *\r\n * @title 多列表头\r\n * @parent 列渲染 Custom Render\r\n * @description columns[n] 可以内嵌 children，以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响\r\n * 多列表头拖拽的时候,原则只拖拽叶子节点的表头。\r\n * demo0402\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\r\n\r\n\r\n\r\nimport dragColumn from 'bee-table/build/lib/dragColumn';\r\n\r\nconst columns = [\r\n {\r\n title: \"姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"个人信息\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"地址\",\r\n children: [\r\n {\r\n title: \"街道\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"单元\",\r\n children: [\r\n {\r\n title: \"楼号\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"门户\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"公司信息\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"公司地址\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"公司名称\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"北清路 68 号\",\r\n companyName: \"用友\",\r\n gender: \"男\"\r\n });\r\n}\r\n\r\nconst DragColumnTable = dragColumn(Table);\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n \n
\n );\n }\n}\nexport default Demo35;\n", "desc": " 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。" }, { "example": _react2['default'].createElement(Demo0406, null), "title": " 自定义整行和整列样式表格", "code": "/**\n *\n * @title 自定义整行和整列样式表格\n * @parent 列渲染 Custom Render\n * @description 某行或某列的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串。此demo展示自定义整行或整列的背景色和字体内容颜色。\n * demo0406\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100,style: {backgroundColor:'#e3f2fd',color:'#505F79'}},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" ,style:{backgroundColor:'#ffebee',color:'#000'}},\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0406 extends Component {\n render() {\n return (\n 总计: {_sum}
}\n />\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n return editable ? (\n \n {\"请输入\" + colName}
}\n >\n \n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n return editable ? (\n \n \n
\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n 取消\n \n \n
\n ) : (\n \n \n \n
\n );\n };\n\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n );\n }\n}\n\nexport default Demo0501;\n", "desc": " 可以对行进行编辑的表格", "scss_code": ".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}" }, { "example": _react2['default'].createElement(Demo0502, null), "title": " 单元格编辑", "code": "/**\n *\n * @title 单元格编辑\n * @parent 编辑 Editor\n * @description 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）\n * demo0502\n */\nimport React, { Component } from \"react\";\nimport { Table, Icon, Select, Tooltip, Form } from 'tinper-bee';\n\n\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n this.editWarp = React.createRef();\n }\n\n commitChange = () => {\n if (this.state.value === \"\") return;\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.commitChange();\n }\n };\n\n handleChange = e => {\n if (e.target.value === \"\") this.editWarp.className += \" verify-cell\";\n this.setState({ value: e.target.value });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
\n ) : (\n this.editWarp = el} className=\"editable-cell-input-wrapper\">\n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n {value || \" \"}\n
\n )}\n \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 \n {editable ? (\n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: this.props.value.d,\n editable: false\n };\n this.refWarp = React.createRef();\n }\n\n edit = () => {\n this.setState({ editable: true }, () => this.refWarp.focus());\n };\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n onRefBlur = e => {\n // 消除点击子组件，父组件先失焦再聚焦的事件触发过程带来的副作用\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\n this.commitChange();\n }\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, editable } = this.state;\n return editable ? (\n \n \n {SELECT_SOURCE.map((item, index) => (\n \n ))}\n \n
\n ) : (\n \n {value || \" \"}\n
\n )}\n \n {value.name || \" \"}\n
\n );\n }\n }\n);\n\nconst dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0502 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n \n \n );\n }\n}\n\nexport default Demo0502;\n", "desc": " 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）", "scss_code": ".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}" }, { "example": _react2['default'].createElement(Demo0503, null), "title": " 弹框（表单）编辑", "code": "/**\n *\n * @title 弹框（表单）编辑\n * @parent 编辑 Editor\n * @description 以弹框形式以对行进行编辑的表格\n * demo0503\n */\n\nimport React, { Component, PureComponent } from \"react\";\nimport { Table } from 'tinper-bee';\n\nimport {\n Select, Form, FormControl, Button, Icon,\n Tooltip, Modal, FormGroup, Label, Row, Col\n} from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nfunction handleFormValueChange(WarpCompProps, field, allFields) {\n const { onChange, throwError } = WarpCompProps;\n if (field.value === \"\") return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(field.value);\n}\n\nconst StringEditCell = Form.createForm({\n onValuesChange: handleFormValueChange\n})(PureStringEditCell);\n\nfunction PureStringEditCell(props) {\n const { getFieldProps, getFieldError } = props.form;\n const { value, required } = props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n
\n \n \n 一些操作\n \n \n
\n )\n }\n }\n];\n\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"4\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"6\"\n }\n];\n\nclass Demo52 extends Component {\n render() {\n return \n
\n
\n )\n }\n}\n\nexport default Demo24;", "desc": " 动态设置columns中数据的fixed属性值【fixed: \"left\"，fixed: \"right\"】。", "scss_code": "th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n" }, { "example": _react2['default'].createElement(Demo0701, null), "title": " 按条件、值过滤", "code": "/**\n*\n* @title 按条件、值过滤\n* @parent 列操作-过滤 Filter\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。\n* demo0701\n*/\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst 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 \n \n
\n );\n }\n}\nexport default Demo13;", "desc": " 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。" }, { "example": _react2['default'].createElement(Demo1001, null), "title": " 拖拽改变列顺序", "code": "/**\n*\n* @title 拖拽改变列顺序\n* @parent 列操作-拖拽 Drag\n* @description 点击选择表头并左右拖拽，可以改变表格列顺序。 onDragEnd 方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。\n* demo1001\n*/\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee';\n\n\n \nimport dragColumn from 'bee-table/build/lib/dragColumn';\n\nconst columns = [\n {\n title: \"订单编号\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"单据日期\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"供应商\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"联系人\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n },\n {\n title: \"操作\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n fixed: 'right',\n }\n];\n\nconst data = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: 'xx供应商',d:'Tom',e:'...', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: 'yy供应商',d:'Jack',e:'...', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: 'zz供应商',d:'Jane',e:'...', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return 宽松型表格
\n\n \n
\n
\n \n );\n }\n}\n\n\nexport default Demo15;\n", "desc": " 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。" }, { "example": _react2['default'].createElement(Demo1201, null), "title": " 拖拽改变行顺序", "code": "/**\n*\n* @title 拖拽改变行顺序\n* @parent 行操作-拖拽\n* @description `rowDraggAble`参数设置是否使用行交换顺序功能，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* Demo1201\n*/\n\nimport React, { Component } from \"react\";\nimport { Switch, Table } from 'tinper-bee';\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:200 },\n { title: \"系统权限\", dataIndex: \"c\", key: \"c\", width: 200,render:()=>{return(\n {\n console.log('currentIndex--'+index);\n }}\n onBodyScroll={this.handleBodyScroll}\n />\n
\n );\n }\n}\n\nexport default Demo30;", "desc": " 万行数据渲染", "scss_code": ".big-data tr td {\n // height: 48px;\n}" }, { "example": _react2['default'].createElement(Demo1402, null), "title": " 嵌套子表格滚动加载", "code": "/**\n*\n* @title 嵌套子表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description 通过expandedRowRender参数来实现子表格。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* demo1402\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Popconfirm } from 'tinper-bee';\n\n\nimport BigData from \"bee-table/build/lib/bigData\";\nconst BigDataTable = BigData(Table);\nconst outColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n \n \n {\n console.log('currentIndex--' + index);\n }}\n rowKey=\"key\"//每条数据的唯一标示，默认为key，如果不是key，必须传\n />\n
\n\n );\n }\n}\n\nexport default Demo34;", "desc": "" }, { "example": _react2['default'].createElement(Demo1601, null), "title": " 表格+分页", "code": "/**\n * @title 表格+分页\n * @parent 分页 Pagination\n * @description 点击分页联动表格\n * demo1601\n */\n\nimport React, { Component } from \"react\";\nimport { Table, Pagination } from 'tinper-bee';\n\n\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst pageData = {\n 1: [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n ],\n 2: [\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" },\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n \n
\n
\n );\n }\n}\nexport default Demo8;\n", "desc": " 点击分页联动表格", "scss_code": ".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}" }];
var Demo = function (_Component) {
_inherits(Demo, _Component);
@@ -36530,38 +36530,38 @@
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
- /**
- * @title 尺寸
+ /**
+ * @title 尺寸
*/
size: _propTypes2["default"].oneOf(['sm', 'md', 'xg', 'lg']),
- /**
- * @title 样式
+ /**
+ * @title 样式
*/
style: _propTypes2["default"].object,
- /**
- * @title 形状
+ /**
+ * @title 形状
*/
shape: _propTypes2["default"].oneOf(['block', 'round', 'border', 'squared', 'floating', 'pillRight', 'pillLeft', 'icon']),
bordered: _propTypes2["default"].bool,
- /**
- * @title 类型
+ /**
+ * @title 类型
*/
colors: _propTypes2["default"].oneOf(['primary', 'secondary', 'accent', 'success', 'info', 'warning', 'danger', 'dark', 'light', 'default']),
- /**
- * @title 是否禁用
- * @veIgnore
+ /**
+ * @title 是否禁用
+ * @veIgnore
*/
disabled: _propTypes2["default"].bool,
- /**
- * @title 类名
- * @veIgnore
+ /**
+ * @title 类名
+ * @veIgnore
*/
className: _propTypes2["default"].string,
- /**
- * @title