npm - @uiw/doc - Versions diffs - 4.17.0 → 4.18.0 - Mend

@uiw/doc 4.17.0 → 4.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (199) hide show

package/web/static/js/6659.32d92089.chunk.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite\|\|[]).push([[6659],{66659:function(n,e,t){t.r(e),e.default="Table \u8868\u683c\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-table/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-table.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-table)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-table.svg?label=@uiw/react-table)](https://npmjs.com/@uiw/react-table)\n\n\u8868\u793a\u4e24\u79cd\u76f8\u4e92\u5bf9\u7acb\u7684\u72b6\u6001\u95f4\u7684\u5207\u6362\uff0c\u591a\u7528\u4e8e\u89e6\u53d1\u300c\u5f00/\u5173\u300d\u3002\u9009\u4e2d\u65f6\u7684\u5185\u5bb9\u652f\u6301\u54cd\u5e94\u5f0f\u3002\n\n```jsx\nimport { Table } from 'uiw';\n// or\nimport Table from '@uiw/react-table';\n```\n\n### \u57fa\u672c\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n // title: '\u59d3\u540d',\n ellipsis: true, \n title: ({ key }) => {\n return (\n <span>\u5b57\u6bb5: {key}</span>\n )\n },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table columns={columns} data={dataSource} />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n### \u8868\u5934\u5206\u7ec4\n\n\u8868\u5934\u5206\u7ec4\u901a\u8fc7 `columns` \u6570\u7ec4\u4e2d\u5bf9\u8c61\u7684 `children` \u6765\u5b9e\u73b0\uff0c\u4ee5\u6e32\u67d3\u5206\u7ec4\u8868\u5934\u3002\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'name', \n children: [\n {\n title: '\u4e2d\u6587\u540d\u5b57',\n key: 'cnname',\n children:[\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'firstname',\n children:[\n { title: '\u59d3', key: 'name1', width: 80 },\n { title: '\u540d', key: 'name2', width: 80 },\n ]\n }, {\n title: '\u62fc\u97f3',\n key: 'lastname',\n children:[\n { title: '\u59d3', key: 'pinyin1', width: 80 },\n { title: '\u540d', key: 'pinyin2', width: 80 },\n ],\n },\n ],\n }, {\n title: '\u82f1\u6587\u540d\u5b57',\n width: 100,\n key: 'name_en',\n },\n ]\n }, {\n title: '\u5176\u5b83',\n children:[\n { title: '\u751f\u65e5', key: 'birthday', width: 150 },\n { title: '\u804c\u4e1a', key: 'job', width: 150 },\n ],\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 150,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <span>{text} {key} - {rowNumber} - {columnNumber}</span>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name1: '\u9093', name2:'\u7d2b\u68cb', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991\u5e748\u670816\u65e5', job: '\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba', edit:'' },\n { name1: '\u5468', name2:'\u6770\u4f26', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979\u5e741\u670818\u65e5', job: '\u6b4c\u624b\u3001\u97f3\u4e50\u4eba', edit:'' },\n { name1: '\u9093', name2:'\u7d2b\u68cb', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991\u5e748\u670816\u65e5', job: '\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba', edit:'' },\n { name1: '\u5468', name2:'\u6770\u4f26', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979\u5e741\u670818\u65e5', job: '\u6b4c\u624b\u3001\u97f3\u4e50\u4eba', edit:'' },\n];\nconst Demo = () => (\n <div>\n <Table bordered columns={columns} data={dataSource} />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u8868\u683c\u884c/\u5217\u5408\u5e76\n\n\u8868\u5934\u53ea\u652f\u6301\u5217\u5408\u5e76\uff0c\u4f7f\u7528 `columns` \u91cc\u7684 `colSpan` \u8fdb\u884c\u8bbe\u7f6e\u3002\u8868\u683c\u652f\u6301\u884c/\u5217\u5408\u5e76\uff0c\u4f7f\u7528 `render` \u91cc\u7684\u5355\u5143\u683c\u5c5e\u6027 `colSpan` \u6216\u8005 `rowSpan` \u8bbe\u503c\u4e3a 0 \u65f6\uff0c\u8bbe\u7f6e\u7684\u8868\u683c\u4e0d\u4f1a\u6e32\u67d3\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e \n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n colSpan: 2,\n render: (text, key, rowData, rowNum, colNum) => {\n const obj = {\n children: text,\n props: {}\n }\n if (rowNum === 0) {\n obj.props.rowSpan = 2;\n }\n if (rowNum === 1) {\n obj.props.rowSpan = 0;\n }\n return obj;\n }\n }, {\n title: '\u5730\u5740',\n key: 'info',\n colSpan: 0,\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '12', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table bordered columns={columns} data={dataSource} />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u6807\u9898\u9875\u811a\n\n\u6dfb\u52a0\u8868\u683c\u8fb9\u6846\u7ebf\uff0c\u9875\u5934\u548c\u9875\u811a\u7684\u5c55\u73b0\u6548\u679c\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table\n title={(\n <div>\n \u8fd9\u91cc\u662f\u6807\u9898\uff0c\u6709\u8fb9\u6846\uff0c<b>bordered=true</b>\n </div>\n )}\n footer={(\n <div>\n \u8fd9\u91cc\u662f\u9875\u811a Footer\uff0c\u6709\u8fb9\u6846\uff0c<b>bordered=true</b>\n </div>\n )}\n bordered columns={columns} data={dataSource} />\n <Table title=\"\u8fd9\u91cc\u662f\u6807\u9898\uff0c\u6ca1\u6709\u8fb9\u6846\" footer=\"\u8fd9\u91cc\u662f\u9875\u811a Footer\uff0c\u6ca1\u6709\u8fb9\u6846\" columns={columns} data={dataSource} />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u70b9\u51fb\u5355\u5143\u683c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Notify } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table\n title=\"\u8868\u5185\u5bb9 tbody \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n onCell={(rowData, { rowNum, colNum }) => {\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', colNum);\n Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.name}\"\u3002` });\n }}\n columns={columns}\n data={dataSource}\n />\n <Table\n title=\"\u8868\u5934\u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n onCellHead={(rowData, rowNum, columnNumber) => {\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', columnNumber);\n Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.title}\"\u3002` });\n }}\n onCell={(rowData, { rowNum, colNum }) => {\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', colNum);\n Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.name}\"\u3002` });\n }}\n columns={columns}\n data={dataSource}\n />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u539f\u59cbHTML\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst Demo = () => (\n <div>\n <Table bordered>\n <thead>\n <tr>\n <th>\u540d\u79f0</th>\n <th>\u6570\u91cf</th>\n <th>\u8be6\u60c5</th>\n <th>\u4ef7\u683c</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>\u571f\u8c46</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u841d\u535c</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u9999\u8549</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u829d\u9ebb</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n </tbody>\n </Table>\n <Table>\n <caption>\u6ca1\u6709\u8fb9\u6846</caption>\n <thead>\n <tr>\n <th>\u540d\u79f0</th>\n <th>\u6570\u91cf</th>\n <th>\u8be6\u60c5</th>\n <th>\u4ef7\u683c</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>\u571f\u8c46</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u841d\u535c</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u9999\u8549</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u829d\u9ebb</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n </tbody>\n </Table>\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u9009\u62e9\u548c\u64cd\u4f5c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Checkbox, Pagination, Loader } from 'uiw';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n // \u9009\u4e2d\u7684 key\n checked: [],\n loading: false,\n dataSource: [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002' },\n ],\n columns: [\n {\n title: (data, rowNum, colNum) => {\n const indeterminate = this.state.dataSource.length !== this.state.checked.length && this.state.checked.length > 0;\n const checked = this.state.dataSource.length === this.state.checked.length;\n return (\n <Checkbox\n checked={checked}\n indeterminate={indeterminate}\n onClick={(evn) => {\n let checked = this.state.dataSource.map((item, idx) => idx);\n if(!evn.target.checked) {\n checked = [];\n }\n this.setState({ checked });\n }}\n />\n );\n },\n key: 'checked',\n render: (text, key, rowData, rowNumber, columnNumber) => {\n return (\n <Checkbox checked={rowData.checked} onClick={this.onClickCheckedItem.bind(this, rowNumber)} />\n );\n }\n }, {\n title: '\u540d\u5b57',\n key: 'name',\n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n },\n ]\n }\n }\n onClickCheckedItem(rowNumber, env) {\n let { checked } = this.state;\n const isChecked = env.target.checked;\n if(isChecked) {\n // \u6dfb\u52a0\u5230\u9009\u4e2d\u6570\u7ec4\u4e2d\n checked.push(rowNumber)\n checked = checked.sort((a, b) => a - b);\n } else {\n // \u5220\u9664\u9009\u4e2d\u9879\n checked.splice(checked.indexOf(rowNumber), 1);\n }\n this.setState({ checked });\n }\n render() {\n const { checked } = this.state;\n const dataSource = this.state.dataSource.map((item, idx) => {\n const isChecked = checked.indexOf(idx) > -1;\n return { checked: isChecked, ...item };\n });\n return (\n <div>\n <Loader loading={this.state.loading} style={{ display: 'block' }}>\n <Table\n columns={this.state.columns}\n data={dataSource}\n footer={\n <Pagination\n current={2}\n pageSize={10}\n total={30}\n divider\n onChange={(current, total, pageSize) => {\n this.setState({ loading: true });\n const timer = setTimeout(() => {\n // \u6a21\u62df\u53d8\u66f4\u6570\u636e\n const dataSource = this.state.dataSource.map(item => {\n item.age = Number(item.age) + current;\n return item;\n });\n // \u7ffb\u9875 API \u83b7\u53d6\u6570\u636e\n this.setState({ checked: [], dataSource, loading: false });\n }, 2000);\n }}\n />\n }\n />\n </Loader>\n </div>\n );\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u5355\u5143\u683c\u7701\u7565\u63d0\u793a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Notify, Tooltip } from 'uiw';\n\nconst columns = [\n {\n title: 'Name',\n key: 'name',\n render: text => <a>{text}</a>,\n width: 150,\n },\n {\n title: 'Age',\n key: 'age',\n width: 80,\n },\n {\n title: 'Address',\n key: 'address',\n ellipsis: true,\n render: address => (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column Long Column Long Column',\n key: 'address',\n ellipsis: true,\n render: address => (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column Long Column',\n key: 'address',\n ellipsis: true,\n render: address => (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column',\n key: 'address',\n ellipsis: true,\n render: address => {\n return (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n )\n },\n },\n];\n\nconst data = [\n { name: '\u9093\u7d2b\u68cb', age: '12', address: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002' },\n { name: '\u674e\u6613\u5cf0', age: '32', address: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba' },\n { name: '\u8303\u51b0\u51b0', age: '23', address: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b' },\n { name: '\u6768\u5e42', age: '34', address: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002' },\n { name: 'Angelababy', age: '54', address: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002' },\n { name: '\u5510\u5ae3', age: '12', address: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed' },\n { name: '\u5434\u4ea6\u51e1', age: '4', address: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002' },\n];\n\nconst Demo = () => (\n <div>\n <Table\n title=\"\u8868\u5185\u5bb9 tbody \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n columns={columns}\n data={data}\n />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u65e0\u6570\u636e\u72b6\u6001\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Empty } from 'uiw';\n\nconst columns = [\n {\n ellipsis: true, \n title: '\u59d3\u540d',\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [];\nconst Demo = () => (\n <div>\n <Table\n columns={columns}\n data={dataSource}\n empty={<Empty />} \n />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u53ef\u5c55\u5f00\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n }, \n {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n }, \n {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '10', id: '1'},\n { name: '\u674e\u6613\u5cf0', age: '32', id: '2'},\n { name: '\u8303\u51b0\u51b0', age: '23', id: '3'},\n];\nconst Demo = () => (\n <div>\n <Table \n rowKey=\"id\"\n expandable={{\n expandedRowRender: (record, index, expanded)=>{\n return <div>{record.name}</div>\n },\n // defaultExpandAllRows: true,\n rowExpandable: (r)=>r.name!=='\u674e\u6613\u5cf0',\n expandIcon: (expanded) => expanded ? <Icon type=\"minus-circle-o\"/> : <Icon type=\"plus-circle-o\"/>,\n defaultExpandedRowKeys: [\"1\"]\n }}\n columns={columns} \n data={dataSource} \n />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u6811\u5f62\u6570\u636e\u5c55\u793a\n\n\u8868\u683c\u652f\u6301\u6811\u5f62\u6570\u636e\u7684\u5c55\u793a\uff0c\u5f53\u6570\u636e\u4e2d\u6709 children \u5b57\u6bb5\u65f6\u4f1a\u81ea\u52a8\u5c55\u793a\u4e3a\u6811\u5f62\u8868\u683c\uff0c\u5982\u679c\u4e0d\u9700\u8981\u6216\u914d\u7f6e\u4e3a\u5176\u4ed6\u5b57\u6bb5\u53ef\u4ee5\u7528 childrenColumnName \u8fdb\u884c\u914d\u7f6e\u3002\n\n\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6e indentSize \u4ee5\u63a7\u5236\u6bcf\u4e00\u5c42\u7684\u7f29\u8fdb\u5bbd\u5ea6\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport React from 'react';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n }, \n {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n }, \n {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { \n name: '\u9093\u7d2b\u68cb', \n age: '10', \n id: '1', \n children: [\n {\n name: '\u9093\u7d2b\u68cb-0-1', \n age: '10', \n id: '1-1', \n children: [\n { \n name: '\u9093\u7d2b\u68cb-0-1-1', \n age: '10', \n id: '1-1-1',\n children: [\n {name: '\u9093\u7d2b\u68cb-0-1-1-1', age: '10', id: '-0-1-1-1'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-2', age: '10', id: '-0-1-1-2'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-3', age: '10', id: '-0-1-1-3'},\n ]\n },\n { name: '\u9093\u7d2b\u68cb-0-1-2', age: '10', id: '1-1-2',}\n ]\n },\n {name: '\u9093\u7d2b\u68cb-0-2', age: '10', id: '1-1'},\n {name: '\u9093\u7d2b\u68cb-0-3', age: '10', id: '1-1'},\n ]\n },\n { name: '\u674e\u6613\u5cf0', age: '32', id: '2',},\n { name: '\u8303\u51b0\u51b0', age: '23', id: '3', \n children: [\n {name: '\u8303\u51b0\u51b00-1', age: '23', id: '3-1'},\n {name: '\u8303\u51b0\u51b00-2', age: '23', id: '3-2'},\n {name: '\u8303\u51b0\u51b00-3', age: '23', id: '3-3'},\n ]\n },\n];\nconst Demo = () => {\n const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\n return (\n <div>\n <Table \n rowKey=\"id\"\n columns={columns}\n data={dataSource}\n />\n </div>\n )\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u8868\u683c\u5217\u8fc7\u5bbd\u5bfc\u81f4 footer \u6ed1\u52a8\u51fa\u8868\u683c\u5e95\u90e8\n\n\u4f7f\u7528 scroll \u5c5e\u6027\u7ed9\u8868\u683c\u8bbe\u7f6e\u5bbd(x)\u6216\u9ad8(y)\u5373\u53ef\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n // title: '\u59d3\u540d',\n ellipsis: true, \n width: 1000,\n title: ({ key }) => {\n return (\n <span>\u5b57\u6bb5: {key}</span>\n )\n },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table \n scroll={{x: 1800, y: 100}}\n footer={<div style={{height: 20, }}>\u8fd9\u4e2a\u662ffooter</div>}\n columns={columns} data={dataSource} \n />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u56fa\u5b9a\u5217 \n\n\u901a\u8fc7\u4f7f\u7528 fixed \u4f7f\u5176\u5217\u56fa\u5b9a\n> \u26a0\ufe0f \u6ce8\u610f: \u82e5\u5e76\u6ca1\u6709 scroll \u6eda\u52a8\u6761\uff0cfixed \u5c5e\u6027\u5e76\u4e0d\u4f1a\u6709\u76f4\u89c2\u7684\u6548\u679c\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n // fixed: true,\n width: 50,\n key: 'name', \n }, {\n // fixed: true,\n title: '\u5e74\u9f84',\n width: 50,\n style: { color: 'red' },\n key: 'age',\n }, {\n title: '\u5730\u5740',\n width: 50,\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n fixed: 'right',\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table scroll={{x: 1200}} bordered columns={columns} data={dataSource} />\n </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n### Table\n\n\| \u53c2\u6570 \| \u8bf4\u660e \| \u7c7b\u578b \| \u9ed8\u8ba4\u503c \|\n\|--------- \|-------- \|--------- \|-------- \|\n\| columns \| \u8868\u683c\u5217\u7684\u914d\u7f6e\u63cf\u8ff0\uff0c\u53ef\u4ee5\u5185\u5d4c `children`\uff0c\u4ee5\u6e32\u67d3\u5206\u7ec4\u8868\u5934\u3002\| ColumnProps[] \| `[]` \|\n\| data \| \u6570\u636e\u6570\u7ec4\u3002\| Array[] \| `[]` \|\n\| title \| \u8868\u683c\u6807\u9898 \| ~~Function(text, key, rowData, rowNumber, columnNumber)~~ /<br/> Function(data: IColumns, rowNum: Number, colNum: Number)`@3.0.0+` /<br/> String / ReactNode \| - \|\n\| footer \| \u8868\u683c\u5c3e\u90e8 \| String/ReactNode \| - \|\n\| bordered \| \u662f\u5426\u5c55\u793a\u5916\u8fb9\u6846\u548c\u5217\u8fb9\u6846 \| Boolean \| - \|\n\| empty \| \u65e0\u6570\u636e\u72b6\u6001 \| ReactNode \| - \|\n\| onCellHead \| \u8868\u5934\u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03 \| ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, colNum: Number, rowNum: Number, evn: React.MouseEvent<HTMLTableCellElement\\>) `@3.0.0+` \| - \|\n\| onCell \| \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03 \| ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, options:{ colNum: Number, rowNum: Number, keyName: String }, evn: React.MouseEvent<HTMLTableCellElement\\>) `@3.1.0+` \| - \|\n\| expandable \| \u53ef\u5c55\u5f00\u914d\u7f6e \| ExpandableType \| - \|\n\| rowKey \| \u8868\u683c\u884c key \u7684\u53d6\u503c \| String \| - \|\n\| scroll \| \u8868\u683c\u662f\u5426\u53ef\u6eda\u52a8\uff0c\u4e5f\u53ef\u4ee5\u6307\u5b9a\u6eda\u52a8\u533a\u57df\u7684\u5bbd\u3001\u9ad8 \| { x?: React.CSSProperties['width'], y?: React.CSSProperties['height'] } \| - \|\n\n\n### ColumnProps\n\n\u5217\u63cf\u8ff0\u6570\u636e\u5bf9\u8c61\uff0c\u662f columns \u4e2d\u7684\u4e00\u9879\uff0c\n\n\| \u53c2\u6570 \| \u8bf4\u660e \| \u7c7b\u578b \| \u9ed8\u8ba4\u503c \| \u7248\u672c \|\n\|--------- \|-------- \|--------- \|-------- \|-------- \|\n\| title \| \u5217\u5934\u663e\u793a\u6587\u5b57\u3002\| ReactNode \| - \| - \|\n\| key \| \u9700\u8981\u7684 key\uff0c\u53ef\u4ee5\u5ffd\u7565\u8fd9\u4e2a\u5c5e\u6027\uff0c\u5982\u679c\u6807\u9898\u5e26\u6709 `render` \u51fd\u6570\uff0c\u90a3\u4e48\u8fd9\u4e2a `key` \u4e3a\u5fc5\u987b\u975e\u5e38\u91cd\u8981\u3002\| String \| - \| - \|\n\| width \| \u5217\u5bbd\u5ea6\u3002\| Number \| - \| - \|\n\| colSpan \| \u5408\u5e76\u8868\u5934\u884c\u3002\| Number \| - \| - \|\n\| ellipsis \| \u8d85\u8fc7\u5bbd\u5ea6\u5c06\u81ea\u52a8\u7701\u7565\u3002`v4.8.7+`\| Boolean \| `false` \| - \|\n\| render \| \u751f\u6210\u590d\u6742\u6570\u636e\u7684\u6e32\u67d3\u51fd\u6570\uff0c\u53c2\u6570\u5206\u522b\u4e3a\u5f53\u524d\u884c\u7684\u503c\uff0c\u5f53\u524d\u503c\u7684 `key`\uff0c\u884c\u7d22\u5f15\u6570\u636e\uff0c\u5f53\u524d\u884c\u53f7\uff0c\u5f53\u524d\u5217\u53f7\u3002\| `Function(text, key, rowData, rowNumber, columnNumber)` \| - \| - \|\n\| align \| \u8bbe\u7f6e\u5217\u7684\u5bf9\u9f50\u65b9\u5f0f \| \"left\"\\\|\"center\"\\\|\"right\" \| - \| - \|\n\| className \| \u5217\u6837\u5f0f\u7c7b\u540d \| String \| - \| - \|\n\| fixed \| \u628a\u9009\u62e9\u6846\u5217\u56fa\u5b9a\t \| Boolean \\\|\"left\"\\\|\"right\" \| - \| 4.15.1 \|\n\n### expandable\n\n> \u26a0\ufe0f \u6ce8\u610f: expandedRowKeys \u4e0e onExpandedRowsChange \u5fc5\u987b\u540c\u65f6\u51fa\u73b0\u6216\u4e0d\u51fa\u73b0\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\| \u53c2\u6570 \| \u8bf4\u660e \| \u7c7b\u578b \| \u9ed8\u8ba4\u503c \|\n\|--------- \|-------- \|--------- \|-------- \|\n\| expandedRowRender \| \u81ea\u5b9a\u4e49\u5c55\u5f00\u884c\| (record, index, expanded) => React.ReactNode \| - \|\n\| expandIcon \| \u81ea\u5b9a\u4e49\u56fe\u6807 \| (expanded, record, index) => React.ReactNode; \| - \|\n\| rowExpandable \| \u662f\u5426\u5141\u8bb8\u5c55\u5f00\| (record)=>Boolean \| - \|\n\| defaultExpandAllRows \| \u521d\u59cb\u65f6\uff0c\u662f\u5426\u5c55\u5f00\u6240\u6709\u884c\| Boolean \| false \|\n\| defaultExpandedRowKeys \| \u521d\u59cb\u65f6\uff0c\u9ed8\u8ba4\u5c55\u5f00\u7684\u884c\trowKey\u6570\u7ec4 \| Array \| - \|\n\| expandedRowKeys \| \u63a7\u5236\u5c55\u5f00\u7684\u884c\trowKey\u6570\u7ec4 \| Array \| - \|\n\| onExpandedRowsChange \| \u5c55\u5f00\u7684\u884c\u53d8\u5316\u89e6\u53d1 \| (expandedRows)=>void \| - \|\n\| onExpand \| \u70b9\u51fb\u5c55\u5f00\u56fe\u6807\u89e6\u53d1 \| (expanded,record,index)=>void \| - \|\n\| indentSize \| \u63a7\u5236\u6811\u5f62\u7ed3\u6784\u6bcf\u4e00\u5c42\u7684\u7f29\u8fdb\u5bbd\u5ea6 \| Number \| 16 \|\n\| childrenColumnName \| \u6307\u5b9a\u6811\u5f62\u7ed3\u6784\u7684\u5217\u540d \| String \| children \|\n"}}]);
2	- //# sourceMappingURL=6659.32d92089.chunk.js.map

package/web/static/js/6659.32d92089.chunk.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"static/js/6659.32d92089.chunk.js","mappings":"gHAAA","sources":["../../packages/react-table/README.md"],"sourcesContent":["export default \"Table 表格\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-table/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-table.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-table)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-table.svg?label=@uiw/react-table)](https://npmjs.com/@uiw/react-table)\\n\\n表示两种相互对立的状态间的切换，多用于触发「开/关」。选中时的内容支持响应式。\\n\\n```jsx\\nimport { Table } from 'uiw';\\n// or\\nimport Table from '@uiw/react-table';\\n```\\n\\n### 基本使用\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n // title: '姓名',\\n ellipsis: true, \\n title: ({ key }) => {\\n return (\\n <span>字段: {key}</span>\\n )\\n },\\n key: 'name', \\n }, {\\n title: '年龄',\\n style: { color: 'red' },\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table columns={columns} data={dataSource} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n### 表头分组\\n\\n表头分组通过 `columns` 数组中对象的 `children` 来实现，以渲染分组表头。。\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n style: { color: 'red' },\\n key: 'name', \\n children: [\\n {\\n title: '中文名字',\\n key: 'cnname',\\n children:[\\n {\\n title: '姓名',\\n style: { color: 'red' },\\n key: 'firstname',\\n children:[\\n { title: '姓', key: 'name1', width: 80 },\\n { title: '名', key: 'name2', width: 80 },\\n ]\\n }, {\\n title: '拼音',\\n key: 'lastname',\\n children:[\\n { title: '姓', key: 'pinyin1', width: 80 },\\n { title: '名', key: 'pinyin2', width: 80 },\\n ],\\n },\\n ],\\n }, {\\n title: '英文名字',\\n width: 100,\\n key: 'name_en',\\n },\\n ]\\n }, {\\n title: '其它',\\n children:[\\n { title: '生日', key: 'birthday', width: 150 },\\n { title: '职业', key: 'job', width: 150 },\\n ],\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 150,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <span>{text} {key} - {rowNumber} - {columnNumber}</span>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name1: '邓', name2:'紫棋', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991年8月16日', job: '唱作歌手、作曲人', edit:'' },\\n { name1: '周', name2:'杰伦', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979年1月18日', job: '歌手、音乐人', edit:'' },\\n { name1: '邓', name2:'紫棋', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991年8月16日', job: '唱作歌手、作曲人', edit:'' },\\n { name1: '周', name2:'杰伦', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979年1月18日', job: '歌手、音乐人', edit:'' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table bordered columns={columns} data={dataSource} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 表格行/列合并\\n\\n表头只支持列合并，使用 `columns` 里的 `colSpan` 进行设置。表格支持行/列合并，使用 `render` 里的单元格属性 `colSpan` 或者 `rowSpan` 设值为 0 时，设置的表格不会渲染。\\n\\n \\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n key: 'name', \\n }, {\\n title: '年龄',\\n style: { color: 'red' },\\n key: 'age',\\n colSpan: 2,\\n render: (text, key, rowData, rowNum, colNum) => {\\n const obj = {\\n children: text,\\n props: {}\\n }\\n if (rowNum === 0) {\\n obj.props.rowSpan = 2;\\n }\\n if (rowNum === 1) {\\n obj.props.rowSpan = 0;\\n }\\n return obj;\\n }\\n }, {\\n title: '地址',\\n key: 'info',\\n colSpan: 0,\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '12', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table bordered columns={columns} data={dataSource} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 标题页脚\\n\\n添加表格边框线，页头和页脚的展现效果。\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n style: { color: 'red' },\\n key: 'name', \\n }, {\\n title: '年龄',\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table\\n title={(\\n <div>\\n 这里是标题，有边框，<b>bordered=true</b>\\n </div>\\n )}\\n footer={(\\n <div>\\n 这里是页脚 Footer，有边框，<b>bordered=true</b>\\n </div>\\n )}\\n bordered columns={columns} data={dataSource} />\\n <Table title=\\\"这里是标题，没有边框\\\" footer=\\\"这里是页脚 Footer，没有边框\\\" columns={columns} data={dataSource} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 点击单元格\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Notify } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n style: { color: 'red' },\\n key: 'name', \\n }, {\\n title: '年龄',\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table\\n title=\\\"表内容 tbody 单元格点击回调事件\\\"\\n onCell={(rowData, { rowNum, colNum }) => {\\n console.log('-->3', rowData);\\n console.log('-->4', rowNum);\\n console.log('-->5', colNum);\\n Notify.info({ description: `你点击了\\\"${rowData.name}\\\"。` });\\n }}\\n columns={columns}\\n data={dataSource}\\n />\\n <Table\\n title=\\\"表头单元格点击回调事件\\\"\\n onCellHead={(rowData, rowNum, columnNumber) => {\\n console.log('-->3', rowData);\\n console.log('-->4', rowNum);\\n console.log('-->5', columnNumber);\\n Notify.info({ description: `你点击了\\\"${rowData.title}\\\"。` });\\n }}\\n onCell={(rowData, { rowNum, colNum }) => {\\n console.log('-->3', rowData);\\n console.log('-->4', rowNum);\\n console.log('-->5', colNum);\\n Notify.info({ description: `你点击了\\\"${rowData.name}\\\"。` });\\n }}\\n columns={columns}\\n data={dataSource}\\n />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 原始HTML\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst Demo = () => (\\n <div>\\n <Table bordered>\\n <thead>\\n <tr>\\n <th>名称</th>\\n <th>数量</th>\\n <th>详情</th>\\n <th>价格</th>\\n </tr>\\n </thead>\\n <tbody>\\n <tr>\\n <td>土豆</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>萝卜</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>香蕉</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>芝麻</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n </tbody>\\n </Table>\\n <Table>\\n <caption>没有边框</caption>\\n <thead>\\n <tr>\\n <th>名称</th>\\n <th>数量</th>\\n <th>详情</th>\\n <th>价格</th>\\n </tr>\\n </thead>\\n <tbody>\\n <tr>\\n <td>土豆</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>萝卜</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>香蕉</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>芝麻</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n </tbody>\\n </Table>\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 选择和操作\\n\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Checkbox, Pagination, Loader } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n // 选中的 key\\n checked: [],\\n loading: false,\\n dataSource: [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。' },\\n ],\\n columns: [\\n {\\n title: (data, rowNum, colNum) => {\\n const indeterminate = this.state.dataSource.length !== this.state.checked.length && this.state.checked.length > 0;\\n const checked = this.state.dataSource.length === this.state.checked.length;\\n return (\\n <Checkbox\\n checked={checked}\\n indeterminate={indeterminate}\\n onClick={(evn) => {\\n let checked = this.state.dataSource.map((item, idx) => idx);\\n if(!evn.target.checked) {\\n checked = [];\\n }\\n this.setState({ checked });\\n }}\\n />\\n );\\n },\\n key: 'checked',\\n render: (text, key, rowData, rowNumber, columnNumber) => {\\n return (\\n <Checkbox checked={rowData.checked} onClick={this.onClickCheckedItem.bind(this, rowNumber)} />\\n );\\n }\\n }, {\\n title: '名字',\\n key: 'name',\\n }, {\\n title: '年龄',\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n },\\n ]\\n }\\n }\\n onClickCheckedItem(rowNumber, env) {\\n let { checked } = this.state;\\n const isChecked = env.target.checked;\\n if(isChecked) {\\n // 添加到选中数组中\\n checked.push(rowNumber)\\n checked = checked.sort((a, b) => a - b);\\n } else {\\n // 删除选中项\\n checked.splice(checked.indexOf(rowNumber), 1);\\n }\\n this.setState({ checked });\\n }\\n render() {\\n const { checked } = this.state;\\n const dataSource = this.state.dataSource.map((item, idx) => {\\n const isChecked = checked.indexOf(idx) > -1;\\n return { checked: isChecked, ...item };\\n });\\n return (\\n <div>\\n <Loader loading={this.state.loading} style={{ display: 'block' }}>\\n <Table\\n columns={this.state.columns}\\n data={dataSource}\\n footer={\\n <Pagination\\n current={2}\\n pageSize={10}\\n total={30}\\n divider\\n onChange={(current, total, pageSize) => {\\n this.setState({ loading: true });\\n const timer = setTimeout(() => {\\n // 模拟变更数据\\n const dataSource = this.state.dataSource.map(item => {\\n item.age = Number(item.age) + current;\\n return item;\\n });\\n // 翻页 API 获取数据\\n this.setState({ checked: [], dataSource, loading: false });\\n }, 2000);\\n }}\\n />\\n }\\n />\\n </Loader>\\n </div>\\n );\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义单元格省略提示\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Notify, Tooltip } from 'uiw';\\n\\nconst columns = [\\n {\\n title: 'Name',\\n key: 'name',\\n render: text => <a>{text}</a>,\\n width: 150,\\n },\\n {\\n title: 'Age',\\n key: 'age',\\n width: 80,\\n },\\n {\\n title: 'Address',\\n key: 'address',\\n ellipsis: true,\\n render: address => (\\n <Tooltip placement=\\\"topLeft\\\" content={address}>\\n {address}\\n </Tooltip>\\n ),\\n },\\n {\\n title: 'Long Column Long Column Long Column',\\n key: 'address',\\n ellipsis: true,\\n render: address => (\\n <Tooltip placement=\\\"topLeft\\\" content={address}>\\n {address}\\n </Tooltip>\\n ),\\n },\\n {\\n title: 'Long Column Long Column',\\n key: 'address',\\n ellipsis: true,\\n render: address => (\\n <Tooltip placement=\\\"topLeft\\\" content={address}>\\n {address}\\n </Tooltip>\\n ),\\n },\\n {\\n title: 'Long Column',\\n key: 'address',\\n ellipsis: true,\\n render: address => {\\n return (\\n <Tooltip placement=\\\"topLeft\\\" content={address}>\\n {address}\\n </Tooltip>\\n )\\n },\\n },\\n];\\n\\nconst data = [\\n { name: '邓紫棋', age: '12', address: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。' },\\n { name: '李易峰', age: '32', address: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人' },\\n { name: '范冰冰', age: '23', address: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手' },\\n { name: '杨幂', age: '34', address: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。' },\\n { name: 'Angelababy', age: '54', address: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。' },\\n { name: '唐嫣', age: '12', address: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班' },\\n { name: '吴亦凡', age: '4', address: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。' },\\n];\\n\\nconst Demo = () => (\\n <div>\\n <Table\\n title=\\\"表内容 tbody 单元格点击回调事件\\\"\\n columns={columns}\\n data={data}\\n />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 无数据状态\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Empty } from 'uiw';\\n\\nconst columns = [\\n {\\n ellipsis: true, \\n title: '姓名',\\n key: 'name', \\n }, {\\n title: '年龄',\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [];\\nconst Demo = () => (\\n <div>\\n <Table\\n columns={columns}\\n data={dataSource}\\n empty={<Empty />} \\n />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 可展开\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Icon } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n ellipsis: true, \\n key: 'name', \\n }, \\n {\\n title: '年龄',\\n style: { color: 'red' },\\n key: 'age',\\n }, \\n {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '10', id: '1'},\\n { name: '李易峰', age: '32', id: '2'},\\n { name: '范冰冰', age: '23', id: '3'},\\n];\\nconst Demo = () => (\\n <div>\\n <Table \\n rowKey=\\\"id\\\"\\n expandable={{\\n expandedRowRender: (record, index, expanded)=>{\\n return <div>{record.name}</div>\\n },\\n // defaultExpandAllRows: true,\\n rowExpandable: (r)=>r.name!=='李易峰',\\n expandIcon: (expanded) => expanded ? <Icon type=\\\"minus-circle-o\\\"/> : <Icon type=\\\"plus-circle-o\\\"/>,\\n defaultExpandedRowKeys: [\\\"1\\\"]\\n }}\\n columns={columns} \\n data={dataSource} \\n />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 树形数据展示\\n\\n表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 childrenColumnName 进行配置。\\n\\n可以通过设置 indentSize 以控制每一层的缩进宽度\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport React from 'react';\\nimport { Table, Button, Icon } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n ellipsis: true, \\n key: 'name', \\n }, \\n {\\n title: '年龄',\\n style: { color: 'red' },\\n key: 'age',\\n }, \\n {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { \\n name: '邓紫棋', \\n age: '10', \\n id: '1', \\n children: [\\n {\\n name: '邓紫棋-0-1', \\n age: '10', \\n id: '1-1', \\n children: [\\n { \\n name: '邓紫棋-0-1-1', \\n age: '10', \\n id: '1-1-1',\\n children: [\\n {name: '邓紫棋-0-1-1-1', age: '10', id: '-0-1-1-1'},\\n {name: '邓紫棋-0-1-1-2', age: '10', id: '-0-1-1-2'},\\n {name: '邓紫棋-0-1-1-3', age: '10', id: '-0-1-1-3'},\\n ]\\n },\\n { name: '邓紫棋-0-1-2', age: '10', id: '1-1-2',}\\n ]\\n },\\n {name: '邓紫棋-0-2', age: '10', id: '1-1'},\\n {name: '邓紫棋-0-3', age: '10', id: '1-1'},\\n ]\\n },\\n { name: '李易峰', age: '32', id: '2',},\\n { name: '范冰冰', age: '23', id: '3', \\n children: [\\n {name: '范冰冰0-1', age: '23', id: '3-1'},\\n {name: '范冰冰0-2', age: '23', id: '3-2'},\\n {name: '范冰冰0-3', age: '23', id: '3-3'},\\n ]\\n },\\n];\\nconst Demo = () => {\\n const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\\n return (\\n <div>\\n <Table \\n rowKey=\\\"id\\\"\\n columns={columns}\\n data={dataSource}\\n />\\n </div>\\n )\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 表格列过宽导致 footer 滑动出表格底部\\n\\n使用 scroll 属性给表格设置宽(x)或高(y)即可\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n // title: '姓名',\\n ellipsis: true, \\n width: 1000,\\n title: ({ key }) => {\\n return (\\n <span>字段: {key}</span>\\n )\\n },\\n key: 'name', \\n }, {\\n title: '年龄',\\n style: { color: 'red' },\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table \\n scroll={{x: 1800, y: 100}}\\n footer={<div style={{height: 20, }}>这个是footer</div>}\\n columns={columns} data={dataSource} \\n />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 固定列 \\n\\n通过使用 fixed 使其列固定\\n> ⚠️ 注意: 若并没有 scroll 滚动条，fixed 属性并不会有直观的效果\\n\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n ellipsis: true, \\n // fixed: true,\\n width: 50,\\n key: 'name', \\n }, {\\n // fixed: true,\\n title: '年龄',\\n width: 50,\\n style: { color: 'red' },\\n key: 'age',\\n }, {\\n title: '地址',\\n width: 50,\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n fixed: 'right',\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table scroll={{x: 1200}} bordered columns={columns} data={dataSource} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n### Table\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| columns | 表格列的配置描述，可以内嵌 `children`，以渲染分组表头。| ColumnProps[] | `[]` |\\n| data | 数据数组。| Array[] | `[]` |\\n| title | 表格标题 | ~~Function(text, key, rowData, rowNumber, columnNumber)~~ /<br/> Function(data: IColumns, rowNum: Number, colNum: Number)`@3.0.0+` /<br/> String / ReactNode | - |\\n| footer | 表格尾部 | String/ReactNode | - |\\n| bordered | 是否展示外边框和列边框 | Boolean | - |\\n| empty | 无数据状态 | ReactNode | - |\\n| onCellHead | 表头单元格点击回调 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, colNum: Number, rowNum: Number, evn: React.MouseEvent<HTMLTableCellElement\\\\>) `@3.0.0+` | - |\\n| onCell | 单元格点击回调 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, options:{ colNum: Number, rowNum: Number, keyName: String }, evn: React.MouseEvent<HTMLTableCellElement\\\\>) `@3.1.0+` | - |\\n| expandable | 可展开配置 | ExpandableType | - |\\n| rowKey | 表格行 key 的取值 | String | - |\\n| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高 | { x?: React.CSSProperties['width'], y?: React.CSSProperties['height'] } | - |\\n\\n\\n### ColumnProps\\n\\n列描述数据对象，是 columns 中的一项，\\n\\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\\n|--------- |-------- |--------- |-------- |-------- |\\n| title | 列头显示文字。| ReactNode | - | - |\\n| key | 需要的 key，可以忽略这个属性，如果标题带有 `render` 函数，那么这个 `key` 为必须非常重要。| String | - | - |\\n| width | 列宽度。| Number | - | - |\\n| colSpan | 合并表头行。| Number | - | - |\\n| ellipsis | 超过宽度将自动省略。`v4.8.7+`| Boolean | `false` | - |\\n| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前值的 `key`，行索引数据，当前行号，当前列号。| `Function(text, key, rowData, rowNumber, columnNumber)` | - | - |\\n| align | 设置列的对齐方式 | \\\"left\\\"\\\\|\\\"center\\\"\\\\|\\\"right\\\" | - | - |\\n| className | 列样式类名 | String | - | - |\\n| fixed | 把选择框列固定\\t | Boolean \\\\|\\\"left\\\"\\\\|\\\"right\\\" | - | 4.15.1 |\\n\\n### expandable\\n\\n> ⚠️ 注意: expandedRowKeys 与 onExpandedRowsChange 必须同时出现或不出现\\n\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| expandedRowRender | 自定义展开行| (record, index, expanded) => React.ReactNode | - |\\n| expandIcon | 自定义图标 | (expanded, record, index) => React.ReactNode; | - |\\n| rowExpandable | 是否允许展开| (record)=>Boolean | - |\\n| defaultExpandAllRows | 初始时，是否展开所有行| Boolean | false |\\n| defaultExpandedRowKeys | 初始时，默认展开的行\\trowKey数组 | Array | - |\\n| expandedRowKeys | 控制展开的行\\trowKey数组 | Array | - |\\n| onExpandedRowsChange | 展开的行变化触发 | (expandedRows)=>void | - |\\n| onExpand | 点击展开图标触发 | (expanded,record,index)=>void | - |\\n| indentSize | 控制树形结构每一层的缩进宽度 | Number | 16 |\\n| childrenColumnName | 指定树形结构的列名 | String | children |\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/6869.5433df9b.chunk.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite\|\|[]).push([[6869],{76869:function(n,e,t){t.r(e),e.default="DateInput \u65e5\u671f\u8f93\u5165\u6846\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-date-input/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-date-input.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-date-input)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-date-input.svg?label=@uiw/react-date-input)](https://npmjs.com/@uiw/react-date-input)\n\n\u663e\u793a\u4e00\u4e2a\u6708\u7684\u65e5\u5386\uff0c\u5e76\u5141\u8bb8\u7528\u6237\u9009\u62e9\u5355\u4e2a\u65e5\u671f\u3002\n\n```jsx\nimport { DateInput, DateInputRange } from 'uiw';\n// or\nimport DateInput,{ DateInputRange } from '@uiw/react-date-input';\n// \u5728 `v4.13.0` \u7248\u672c\u4e2d\u589e\u52a0 DateInputRange \u7ec4\u4ef6\n```\n\n## \u57fa\u672c\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput, DateInputRange, Row, Col } from 'uiw';\n\nfunction Demo () {\n\n const [dataRange,dataRangeSet] =React.useState(['2022-02-25 15:06:24','2022-02-27 14:47:32'])\n\n function onChange(selectedDate,dataRange) {\n console.log('selectedDate',selectedDate,dataRange)\n }\n\n return (\n <div>\n <Row gutter={10} style={{ maxWidth: 360,marginBottom:10 }}>\n <Col fixed>\n <DateInput\n value={new Date()}\n datePickerProps={{ todayButton: '\u4eca\u5929' }}\n onChange={onChange}\n />\n </Col>\n <Col>\n <DateInput\n value={new Date()}\n disabled\n onChange={onChange}\n />\n </Col>\n </Row>\n <Row gutter={10}>\n <Col>\n <DateInputRange\n bodyStyle={{width:350}}\n format=\"YYYY/MM/DD HH:mm:ss\"\n value={dataRange}\n datePickerProps={{ todayButton: '\u4eca\u5929',showTime:true }}\n onChange={onChange}\n />\n </Col>\n </Row>\n </div>\n )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 [`<DateInput />`](#/components/date-input) \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';\n\nfunction Demo(){\n const form = React.useRef(null)\n\n const resetDateRange = () => {\n form.current.resetForm()\n }\n\n const setDateRange = () => {\n form.current.setFields({dateRange:[new Date(),new Date()]})\n }\n\n return (\n <Form\n ref={form}\n onSubmit={({ initial, current }) => {\n if (current.date) {\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a${current.date}`,\n });\n } else {\n Notify.error({\n title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a${current.date}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }\n }}\n fields={{\n date: {\n initialValue: '2019/02/17',\n labelClassName: 'fieldLabel',\n labelFor: 'date-inline',\n children: <DateInput datePickerProps={{ todayButton: '\u4eca\u5929' }} id=\"date-inline\" />\n },\n dateRange: {\n initialValue: ['2019/02/17', '2019/02/20'],\n labelClassName: 'fieldLabel',\n labelFor: 'date-inline',\n children: <DateInputRange datePickerProps={{ todayButton: '\u4eca\u5929' }} id=\"date-inline\" />\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row gutter={10}>\n <Col fixed>{fields.date}</Col>\n </Row>\n <Row gutter={10}>\n <Col fixed>{fields.dateRange}</Col>\n </Row>\n <Row gutter={10}>\n <Col>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button onClick={resetDateRange} >\u91cd\u7f6e</Button>\n <Button onClick={setDateRange}>setValue</Button>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u65e5\u671f\u683c\u5f0f\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n onChange(selectedDate) {\n console.log('selectedDate:', selectedDate);\n }\n render() {\n return (\n <div style={{ maxWidth: 200 }}>\n <DateInput\n format=\"YYYY # MM # DD\"\n datePickerProps={{ todayButton: '\u4eca\u5929' }}\n onChange={this.onChange.bind(this)}\n />\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u65e5\u671f\u65f6\u95f4\u8bbe\u7f6e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n onChange(selectedDate) {\n console.log('selectedDate:', selectedDate);\n }\n render() {\n return (\n <div style={{ maxWidth: 200 }}>\n <DateInput\n format=\"YYYY/MM/DD HH:mm:ss\"\n datePickerProps={{ showTime: true, todayButton: '\u4eca\u5929' }}\n onChange={this.onChange.bind(this)}\n />\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u52a8\u9690\u85cf\u5f39\u5c42\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n onChange(selectedDate) {\n console.log('selectedDate:', selectedDate);\n }\n render() {\n return (\n <div style={{ maxWidth: 200 }}>\n <DateInput\n autoClose={true}\n format=\"YYYY/MM/DD HH:mm:ss\"\n datePickerProps={{ showTime: true, todayButton: '\u4eca\u5929' }}\n onChange={this.onChange.bind(this)}\n />\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n\| \u53c2\u6570 \| \u8bf4\u660e \| \u7c7b\u578b \| \u9ed8\u8ba4\u503c \|\n\| ---- \| ---- \| ---- \| ---- \|\n\| value \| \u521d\u59cb\u65f6\u95f4\u503c \| Date \| - \|\n\| placeholder \| \u8f93\u5165\u6846\u63d0\u793a\u6587\u5b57 \| String \| - \|\n\| allowClear \| \u662f\u5426\u663e\u793a\u6e05\u9664\u6309\u94ae \| Boolean \| true \|\n\| format \| \u683c\u5f0f\u5316\u65f6\u95f4\uff0c\u89c4\u5219\u67e5\u770b [`<formatter>`](#/components/formatter) \u6587\u6863 \| String \| `YYYY/MM/DD` \|\n\| onChange \| \u9009\u62e9\u4e00\u5929\u65f6\u8c03\u7528\u3002 \| Function(selectedDate:Date) \| - \|\n\| popoverProps \| \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Popover>`](#/components/popover) \u7ec4\u4ef6 \| Object \| - \|\n\| datePickerProps \| \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<DatePicker>`](#/components/date-picker) \u7ec4\u4ef6 \| Object \| - \|\n\| disabled \| \u7ec4\u4ef6 [`<Input>`](#/components/input) \u7684\u5c5e\u6027\uff0c\u7981\u7528\u65e5\u5386 \| Boolean \| - \|\n\| autoClose \| \u662f\u5426\u81ea\u52a8\u5173\u95ed\u5f39\u5c42 \| Boolean \| false \|\n\n\u7ec4\u4ef6 `DateInput` \u7ee7\u627f `<Input>` \u7ec4\u4ef6\uff0c\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [`<Input>`](#/components/input)\u3002\n\n## DateInputRange\n\n\u5728 `v4.13.0` \u7248\u672c\u4e2d\u589e\u52a0 `DateInputRange` \u7ec4\u4ef6\u3002\n\n\| \u53c2\u6570 \| \u8bf4\u660e \| \u7c7b\u578b \| \u9ed8\u8ba4\u503c \|\n\| ---- \| ---- \| ---- \| ---- \|\n\| value \| \u521d\u59cb\u65f6\u95f4\u503c \| Array<Date, string> \| - \|\n\| placeholder \| \u8f93\u5165\u6846\u63d0\u793a\u6587\u5b57 \| String \| - \|\n\| allowClear \| \u662f\u5426\u663e\u793a\u6e05\u9664\u6309\u94ae \| Boolean \| true \|\n\| format \| \u683c\u5f0f\u5316\u65f6\u95f4\uff0c\u89c4\u5219\u67e5\u770b [`<formatter>`](#/components/formatter) \u6587\u6863 \| String \| `YYYY/MM/DD` \|\n\| onChange \| \u9009\u62e9\u4e00\u5929\u65f6\u8c03\u7528\u3002 \| Function(selectedDate:Date, dateRange: Array<Date>) \| - \|\n\| popoverProps \| \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Popover>`](#/components/popover) \u7ec4\u4ef6 \| Object \| - \|\n\| datePickerProps \| \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<DatePicker>`](#/components/date-picker) \u7ec4\u4ef6 \| Object \| - \|\n\| disabled \| \u7ec4\u4ef6 [`<Input>`](#/components/input) \u7684\u5c5e\u6027\uff0c\u7981\u7528\u65e5\u5386 \| Boolean \| - \|\n\| bodyStyle \| \u9009\u62e9\u6846\u6837\u5f0f \| Object \| { width: 300 } \| - \|\n\n\u7ec4\u4ef6 `DateInputRange` \u7ee7\u627f `<Input>` \u7ec4\u4ef6\uff0c\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [`<Input>`](#/components/input)\u3002\n\n"}}]);
2	- //# sourceMappingURL=6869.5433df9b.chunk.js.map

package/web/static/js/6869.5433df9b.chunk.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"static/js/6869.5433df9b.chunk.js","mappings":"gHAAA","sources":["../../packages/react-date-input/README.md"],"sourcesContent":["export default \"DateInput 日期输入框\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-date-input/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-date-input.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-date-input)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-date-input.svg?label=@uiw/react-date-input)](https://npmjs.com/@uiw/react-date-input)\\n\\n显示一个月的日历，并允许用户选择单个日期。\\n\\n```jsx\\nimport { DateInput, DateInputRange } from 'uiw';\\n// or\\nimport DateInput,{ DateInputRange } from '@uiw/react-date-input';\\n// 在 `v4.13.0` 版本中增加 DateInputRange 组件\\n```\\n\\n## 基本使用\\n\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput, DateInputRange, Row, Col } from 'uiw';\\n\\nfunction Demo () {\\n\\n const [dataRange,dataRangeSet] =React.useState(['2022-02-25 15:06:24','2022-02-27 14:47:32'])\\n\\n function onChange(selectedDate,dataRange) {\\n console.log('selectedDate',selectedDate,dataRange)\\n }\\n\\n return (\\n <div>\\n <Row gutter={10} style={{ maxWidth: 360,marginBottom:10 }}>\\n <Col fixed>\\n <DateInput\\n value={new Date()}\\n datePickerProps={{ todayButton: '今天' }}\\n onChange={onChange}\\n />\\n </Col>\\n <Col>\\n <DateInput\\n value={new Date()}\\n disabled\\n onChange={onChange}\\n />\\n </Col>\\n </Row>\\n <Row gutter={10}>\\n <Col>\\n <DateInputRange\\n bodyStyle={{width:350}}\\n format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n value={dataRange}\\n datePickerProps={{ todayButton: '今天',showTime:true }}\\n onChange={onChange}\\n />\\n </Col>\\n </Row>\\n </div>\\n )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 [`<DateInput />`](#/components/date-input) 组件。\\n\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';\\n\\nfunction Demo(){\\n const form = React.useRef(null)\\n\\n const resetDateRange = () => {\\n form.current.resetForm()\\n }\\n\\n const setDateRange = () => {\\n form.current.setFields({dateRange:[new Date(),new Date()]})\\n }\\n\\n return (\\n <Form\\n ref={form}\\n onSubmit={({ initial, current }) => {\\n if (current.date) {\\n Notify.success({\\n title: '提交成功！',\\n description: `表单提交时间成功，时间为：${current.date}`,\\n });\\n } else {\\n Notify.error({\\n title: '提交失败！',\\n description: `表单提交时间成功，时间为：${current.date}，将自动填充初始化值！`,\\n });\\n }\\n }}\\n fields={{\\n date: {\\n initialValue: '2019/02/17',\\n labelClassName: 'fieldLabel',\\n labelFor: 'date-inline',\\n children: <DateInput datePickerProps={{ todayButton: '今天' }} id=\\\"date-inline\\\" />\\n },\\n dateRange: {\\n initialValue: ['2019/02/17', '2019/02/20'],\\n labelClassName: 'fieldLabel',\\n labelFor: 'date-inline',\\n children: <DateInputRange datePickerProps={{ todayButton: '今天' }} id=\\\"date-inline\\\" />\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div>\\n <Row gutter={10}>\\n <Col fixed>{fields.date}</Col>\\n </Row>\\n <Row gutter={10}>\\n <Col fixed>{fields.dateRange}</Col>\\n </Row>\\n <Row gutter={10}>\\n <Col>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n <Button onClick={resetDateRange} >重置</Button>\\n <Button onClick={setDateRange}>setValue</Button>\\n </Col>\\n </Row>\\n </div>\\n )\\n }}\\n </Form>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 日期格式\\n\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n onChange(selectedDate) {\\n console.log('selectedDate:', selectedDate);\\n }\\n render() {\\n return (\\n <div style={{ maxWidth: 200 }}>\\n <DateInput\\n format=\\\"YYYY # MM # DD\\\"\\n datePickerProps={{ todayButton: '今天' }}\\n onChange={this.onChange.bind(this)}\\n />\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 日期时间设置\\n\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n onChange(selectedDate) {\\n console.log('selectedDate:', selectedDate);\\n }\\n render() {\\n return (\\n <div style={{ maxWidth: 200 }}>\\n <DateInput\\n format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n datePickerProps={{ showTime: true, todayButton: '今天' }}\\n onChange={this.onChange.bind(this)}\\n />\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自动隐藏弹层\\n\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n onChange(selectedDate) {\\n console.log('selectedDate:', selectedDate);\\n }\\n render() {\\n return (\\n <div style={{ maxWidth: 200 }}>\\n <DateInput\\n autoClose={true}\\n format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n datePickerProps={{ showTime: true, todayButton: '今天' }}\\n onChange={this.onChange.bind(this)}\\n />\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n| ---- | ---- | ---- | ---- |\\n| value | 初始时间值 | Date | - |\\n| placeholder | 输入框提示文字 | String | - |\\n| allowClear | 是否显示清除按钮 | Boolean | true |\\n| format | 格式化时间，规则查看 [`<formatter>`](#/components/formatter) 文档 | String | `YYYY/MM/DD` |\\n| onChange | 选择一天时调用。 | Function(selectedDate:Date) | - |\\n| popoverProps | 将参数传递给 [`<Popover>`](#/components/popover) 组件 | Object | - |\\n| datePickerProps | 将参数传递给 [`<DatePicker>`](#/components/date-picker) 组件 | Object | - |\\n| disabled | 组件 [`<Input>`](#/components/input) 的属性，禁用日历 | Boolean | - |\\n| autoClose | 是否自动关闭弹层 | Boolean | false |\\n\\n组件 `DateInput` 继承 `<Input>` 组件，更多属性文档请参考 [`<Input>`](#/components/input)。\\n\\n## DateInputRange\\n\\n在 `v4.13.0` 版本中增加 `DateInputRange` 组件。\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n| ---- | ---- | ---- | ---- |\\n| value | 初始时间值 | Array<Date, string> | - |\\n| placeholder | 输入框提示文字 | String | - |\\n| allowClear | 是否显示清除按钮 | Boolean | true |\\n| format | 格式化时间，规则查看 [`<formatter>`](#/components/formatter) 文档 | String | `YYYY/MM/DD` |\\n| onChange | 选择一天时调用。 | Function(selectedDate:Date, dateRange: Array<Date>) | - |\\n| popoverProps | 将参数传递给 [`<Popover>`](#/components/popover) 组件 | Object | - |\\n| datePickerProps | 将参数传递给 [`<DatePicker>`](#/components/date-picker) 组件 | Object | - |\\n| disabled | 组件 [`<Input>`](#/components/input) 的属性，禁用日历 | Boolean | - |\\n| bodyStyle | 选择框样式 | Object | { width: 300 } | - |\\n\\n组件 `DateInputRange` 继承 `<Input>` 组件，更多属性文档请参考 [`<Input>`](#/components/input)。\\n\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/7313.e4afef69.chunk.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite\|\|[]).push([[7313],{67313:function(e,n,l){l.r(n),n.default="SearchSelect \u641c\u7d22\u9009\u62e9\u5668\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-select)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?label=@uiw/react-search-select)](https://npmjs.com/@uiw/react-search-select)\n\n\u641c\u7d22\u9009\u62e9\u5668\n\n```jsx\nimport { SearchSelect, Row ,Col } from 'uiw';\n// or\nimport SearchSelect from '@uiw/react-search-select';\n```\n\n## \u57fa\u7840\u793a\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n const [values, setValues] = React.useState([{label: 'a7', value: 7},{label: 'a8', value: 8}]);\n const [value, setValue] = React.useState([{label: 'a7', value: 7}]);\n\nfunction handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return(\n <Row gutter={20}>\n <Row>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n showSearch={true}\n labelInValue={true}\n maxTagCount={6}\n allowClear\n value={values}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n onSearch={handleSearch}\n // onSelect={(value)=>console.log('onSelect',value)}\n loading={loading}\n option={option}\n onChange={(value) => {\n console.log('value', value)\n setValues(value)\n }}\n />\n </Row>\n <Row>\n <SearchSelect\n mode=\"single\"\n style={{ width: 200 }}\n showSearch={true}\n labelInValue={true}\n maxTagCount={6}\n allowClear\n value={value}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n onSearch={handleSearch}\n // onSelect={(value)=>console.log('onSelect',value)}\n loading={loading}\n option={option}\n onChange={(value) => {\n console.log('value', value)\n setValue(value)\n }}\n />\n </Row>\n <Row>\n <SearchSelect\n mode=\"single\"\n style={{ width: 200 }}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n disabled={true}\n />\n </Row>\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u9650\u5236\u9009\u9879\u4e2a\u6570\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const valueAmount = 2\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n const [values, setValues] = React.useState([ 1, 2, 7]);\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return(\n <Row style={{ marginLeft: 10 }}>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n showSearch={true}\n valueAmount={valueAmount}\n allowClear\n value={values}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n onSearch={handleSearch}\n // onSelect={(value)=>console.log('onSelect',value)}\n loading={loading}\n option={option}\n onChange={(value) => {\n setValues(value)\n }}\n />\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u663e\u793a\u6700\u5927\u6570\u91cf\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const maxTagCount = 4\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n const [values, setValues] = React.useState([\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a5', value: 5 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]);\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return(\n <Row style={{ marginLeft: 10 }}>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n showSearch={true}\n labelInValue={true}\n maxTagCount={maxTagCount}\n allowClear\n value={values}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n onSearch={handleSearch}\n loading={loading}\n option={option}\n onChange={(value) => {\n setValues(value)\n }}\n />\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u4e0d\u53ef\u641c\u7d22\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n const selectOption=[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ]\n\n const [values, setValues] = React.useState([1,7]);\n\n return(\n <Row style={{ marginLeft: 10 }}>\n <SearchSelect\n mode=\"multiple\"\n style={{ width: 200 }}\n showSearch={true}\n labelInValue={false}\n showSearch={false}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n value={values}\n option={selectOption}\n onChange={(value) => {\n setValues(value)\n }}\n />\n </Row>\n );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 `<SearchSelect />` \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\n\nconst Demo = () => {\n const selectOption =[\n { label: 'a1', value: 1 },\n { label: 'a2', value: 2 },\n { label: 'a3', value: 3 },\n { label: 'a4', value: 4 },\n { label: 'a5', value: 5 },\n { label: 'a6', value: 6 },\n { label: 'a7', value: 7 },\n { label: 'a8', value: 8 },\n ];\n const [option, setOption] = React.useState(selectOption);\n const [loading, setLoading] = React.useState(false);\n\n function handleSearch(e) {\n setLoading(true)\n setTimeout(() => {\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n setOption([...filterOpion]);\n setLoading(false);\n }, 500);\n }\n\n return (\n <div>\n <Form\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.selectField) {\n errorObj.selectField = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n selectField: {\n initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],\n children: (\n <SearchSelect\n allowClear\n labelInValue={true}\n showSearch={true}\n mode=\"multiple\"\n disabled={false}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n onSearch={handleSearch}\n onChange={(v)=>{\n console.log('onChange',v)\n }}\n option={option}\n loading={loading}\n />\n )\n },\n selectSingle: {\n initialValue:[{label: 'a7', value: 7}],\n children: (\n <SearchSelect\n mode=\"single\"\n labelInValue={true}\n showSearch={true}\n allowClear\n disabled={false}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n onSearch={handleSearch}\n onChange={(v)=>{\n console.log('onChange',v)\n }}\n option={option}\n loading={loading}\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div style={{ marginLeft:10}}>\n <Row >\n <Col fixed style={{width:200}}>{fields.selectField}</Col>\n </Row>\n <Row>\n <Col fixed style={{width:200}}>{fields.selectSingle}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: 10, marginTop: 10 }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n );\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n\| \u53c2\u6570 \| \u8bf4\u660e \| \u7c7b\u578b \| \u9ed8\u8ba4\u503c \| \u7248\u672c \|\n\| ---- \| ---- \| ---- \| ---- \| ---- \|\n\| allowClear \| \u652f\u6301\u6e05\u9664 \| Boolean \| `false` \| - \|\n\| disabled \| \u7981\u7528\u9009\u62e9\u5668 \| Boolean \| `false` \| - \|\n\| mode \| \u9009\u62e9\u6a21\u5f0f: `multiple` `single` \| String \| `single` \| - \|\n\| defaultValue \| \u6307\u5b9a\u9ed8\u8ba4\u9009\u4e2d\u7684\u6761\u76ee \| String/Number \| - \| - \|\n\| value \| \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee\uff0c\u591a\u9009\u65f6\u4e3a\u4e00\u4e2a\u6570\u7ec4 \| String \\\| Number \\\| String[] \\\| Number[] \\\| LabeledValue \\\| LabeledValue[] \| - \| - \|\n\| placeholder \| \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 \| String \| - \| - \|\n\| maxTagCount \| \u591a\u9009\u6a21\u5f0f\u4e0b\u5c55\u793atag\u7684\u4e2a\u6570,\u9ed8\u8ba4\u6240\u6709 \| number \| - \| - \|\n\| labelInValue \| \u5f00\u542f\u4f1a\u628a Select \u7684 value \u7c7b\u578b\u4ece `string/number` \u53d8\u4e3a `{ value: string/number, label: string }` \| Boolean \| `false` \| - \|\n\| showSearch \| \u662f\u5426\u53ef\u641c\u7d22 \| Boolean \| - \| - \|\n\| size \| \u9009\u62e9\u6846\u5c3a\u5bf8 \| Enum{large, default, small } \| `default` \| - \|\n\| tagProps \| \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Tag>`](https://uiwjs.github.io/#/components/tag) \u7ec4\u4ef6 \| `TagProps` \| `{}` \| `4.13.0` \|\n\| onChange \| \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 \| function(value:String \\\| Number \\\| String[] \\\| Number[] \\\| LabeledValue \\\| LabeledValue[]) \| - \| - \|\n\| onSearch \| \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 \| function(value: String) \| - \| - \|\n\| onSelect \| \u88ab\u9009\u4e2d\u65f6\u8c03\u7528\uff0c\u53c2\u6570\u4e3a\u9009\u4e2d\u9879\u7684 value \| function(value: String/Number ) \| - \| - \|\n\| loading \| \u52a0\u8f7d\u4e2d\u72b6\u6001 \| Boolean \| `false` \| - \|\n\| valueAmount \| \u591a\u9009\u6a21\u5f0f\u4e0b,\u9650\u5236\u6700\u591a\u9009\u62e9\u591a\u5c11\u4e2a(value\u7684\u957f\u5ea6) \| number \| - \| - \|\n"}}]);
2	- //# sourceMappingURL=7313.e4afef69.chunk.js.map

package/web/static/js/7313.e4afef69.chunk.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"static/js/7313.e4afef69.chunk.js","mappings":"gHAAA","sources":["../../packages/react-search-select/README.md"],"sourcesContent":["export default \"SearchSelect 搜索选择器\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-select)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?label=@uiw/react-search-select)](https://npmjs.com/@uiw/react-search-select)\\n\\n搜索选择器\\n\\n```jsx\\nimport { SearchSelect, Row ,Col } from 'uiw';\\n// or\\nimport SearchSelect from '@uiw/react-search-select';\\n```\\n\\n## 基础示例\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n const [values, setValues] = React.useState([{label: 'a7', value: 7},{label: 'a8', value: 8}]);\\n const [value, setValue] = React.useState([{label: 'a7', value: 7}]);\\n\\nfunction handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return(\\n <Row gutter={20}>\\n <Row>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n showSearch={true}\\n labelInValue={true}\\n maxTagCount={6}\\n allowClear\\n value={values}\\n placeholder=\\\"请输入选择\\\"\\n onSearch={handleSearch}\\n // onSelect={(value)=>console.log('onSelect',value)}\\n loading={loading}\\n option={option}\\n onChange={(value) => {\\n console.log('value', value)\\n setValues(value)\\n }}\\n />\\n </Row>\\n <Row>\\n <SearchSelect\\n mode=\\\"single\\\"\\n style={{ width: 200 }}\\n showSearch={true}\\n labelInValue={true}\\n maxTagCount={6}\\n allowClear\\n value={value}\\n placeholder=\\\"请输入选择\\\"\\n onSearch={handleSearch}\\n // onSelect={(value)=>console.log('onSelect',value)}\\n loading={loading}\\n option={option}\\n onChange={(value) => {\\n console.log('value', value)\\n setValue(value)\\n }}\\n />\\n </Row>\\n <Row>\\n <SearchSelect\\n mode=\\\"single\\\"\\n style={{ width: 200 }}\\n placeholder=\\\"请输入选择\\\"\\n disabled={true}\\n />\\n </Row>\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 限制选项个数\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const valueAmount = 2\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n const [values, setValues] = React.useState([ 1, 2, 7]);\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return(\\n <Row style={{ marginLeft: 10 }}>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n showSearch={true}\\n valueAmount={valueAmount}\\n allowClear\\n value={values}\\n placeholder=\\\"请输入选择\\\"\\n onSearch={handleSearch}\\n // onSelect={(value)=>console.log('onSelect',value)}\\n loading={loading}\\n option={option}\\n onChange={(value) => {\\n setValues(value)\\n }}\\n />\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 显示最大数量\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const maxTagCount = 4\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n const [values, setValues] = React.useState([\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a5', value: 5 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]);\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return(\\n <Row style={{ marginLeft: 10 }}>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n showSearch={true}\\n labelInValue={true}\\n maxTagCount={maxTagCount}\\n allowClear\\n value={values}\\n placeholder=\\\"请输入选择\\\"\\n onSearch={handleSearch}\\n loading={loading}\\n option={option}\\n onChange={(value) => {\\n setValues(value)\\n }}\\n />\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 不可搜索\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption=[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ]\\n\\n const [values, setValues] = React.useState([1,7]);\\n\\n return(\\n <Row style={{ marginLeft: 10 }}>\\n <SearchSelect\\n mode=\\\"multiple\\\"\\n style={{ width: 200 }}\\n showSearch={true}\\n labelInValue={false}\\n showSearch={false}\\n placeholder=\\\"请输入选择\\\"\\n value={values}\\n option={selectOption}\\n onChange={(value) => {\\n setValues(value)\\n }}\\n />\\n </Row>\\n );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 `<SearchSelect />` 组件。\\n\\n\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\\n\\nconst Demo = () => {\\n const selectOption =[\\n { label: 'a1', value: 1 },\\n { label: 'a2', value: 2 },\\n { label: 'a3', value: 3 },\\n { label: 'a4', value: 4 },\\n { label: 'a5', value: 5 },\\n { label: 'a6', value: 6 },\\n { label: 'a7', value: 7 },\\n { label: 'a8', value: 8 },\\n ];\\n const [option, setOption] = React.useState(selectOption);\\n const [loading, setLoading] = React.useState(false);\\n\\n function handleSearch(e) {\\n setLoading(true)\\n setTimeout(() => {\\n const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n setOption([...filterOpion]);\\n setLoading(false);\\n }, 500);\\n }\\n\\n return (\\n <div>\\n <Form\\n onSubmitError={(error) => {\\n if (error.filed) {\\n return { ...error.filed };\\n }\\n return null;\\n }}\\n onSubmit={({initial, current}) => {\\n const errorObj = {};\\n if (!current.selectField) {\\n errorObj.selectField = '默认需要选择内容，选择入内容';\\n }\\n if(Object.keys(errorObj).length > 0) {\\n const err = new Error();\\n err.filed = errorObj;\\n Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });\\n throw err;\\n }\\n Notify.success({\\n title: '提交成功！',\\n description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,\\n });\\n }}\\n fields={{\\n selectField: {\\n initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],\\n children: (\\n <SearchSelect\\n allowClear\\n labelInValue={true}\\n showSearch={true}\\n mode=\\\"multiple\\\"\\n disabled={false}\\n placeholder=\\\"请输入选择\\\"\\n onSearch={handleSearch}\\n onChange={(v)=>{\\n console.log('onChange',v)\\n }}\\n option={option}\\n loading={loading}\\n />\\n )\\n },\\n selectSingle: {\\n initialValue:[{label: 'a7', value: 7}],\\n children: (\\n <SearchSelect\\n mode=\\\"single\\\"\\n labelInValue={true}\\n showSearch={true}\\n allowClear\\n disabled={false}\\n placeholder=\\\"请输入选择\\\"\\n onSearch={handleSearch}\\n onChange={(v)=>{\\n console.log('onChange',v)\\n }}\\n option={option}\\n loading={loading}\\n />\\n )\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div style={{ marginLeft:10}}>\\n <Row >\\n <Col fixed style={{width:200}}>{fields.selectField}</Col>\\n </Row>\\n <Row>\\n <Col fixed style={{width:200}}>{fields.selectSingle}</Col>\\n </Row>\\n <Row>\\n <Col fixed>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n </Col>\\n </Row>\\n <Row>\\n <Col>\\n <pre style={{ padding: 10, marginTop: 10 }}>\\n {JSON.stringify(state.current, null, 2)}\\n </pre>\\n </Col>\\n </Row>\\n </div>\\n )\\n }}\\n </Form>\\n </div>\\n );\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\\n| ---- | ---- | ---- | ---- | ---- |\\n| allowClear | 支持清除 | Boolean | `false` | - |\\n| disabled | 禁用选择器 | Boolean | `false` | - |\\n| mode | 选择模式: `multiple` `single` | String | `single` | - |\\n| defaultValue | 指定默认选中的条目 | String/Number | - | - |\\n| value | 指定当前选中的条目，多选时为一个数组 | String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[] | - | - |\\n| placeholder | 选择框默认文字 | String | - | - |\\n| maxTagCount | 多选模式下展示tag的个数,默认所有 | number | - | - |\\n| labelInValue | 开启会把 Select 的 value 类型从 `string/number` 变为 `{ value: string/number, label: string }` | Boolean | `false` | - |\\n| showSearch | 是否可搜索 | Boolean | - | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` | - |\\n| tagProps | 将参数传递给 [`<Tag>`](https://uiwjs.github.io/#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(value:String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[]) | - | - |\\n| onSearch | 文本框值变化时回调 | function(value: String) | - | - |\\n| onSelect | 被选中时调用，参数为选中项的 value | function(value: String/Number ) | - | - |\\n| loading | 加载中状态 | Boolean | `false` | - |\\n| valueAmount | 多选模式下,限制最多选择多少个(value的长度) | number | - | - |\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/766.254f786a.chunk.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite\|\|[]).push([[766],{80766:function(e,n,l){l.r(n),n.default="SearchTree \u5e26\u641c\u7d22\u7684Tree\u9009\u62e9\u63a7\u4ef6\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-tree)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-tree.svg?label=@uiw/react-search-tree)](https://npmjs.com/@uiw/react-search-tree)\n\n\u4f7f\u7528\u6811\u9009\u62e9\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u9009\u4e2d\u72b6\u6001\u3002\u65b0\u7ec4\u4ef6 v4.11.7+ \u652f\u6301\u3002\n\n```jsx\nimport { SearchTree } from 'uiw';\n// or\nimport SearchTree from '@uiw/react-search-tree';\n```\n\n### \u57fa\u7840\u5b9e\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { SearchTree } from 'uiw';\n\nconst data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: 1,\n children:[\n { label: '\u9ec4\u6d66\u533a', key: 2 },\n { label: '\u5362\u6e7e\u533a', key: 3 },\n {\n label: '\u5f90\u6c47\u533a',\n key: 4,\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', key: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: 9,\n children:[\n { label: '\u4e1c\u57ce\u533a', key: 10 },\n { label: '\u897f\u57ce\u533a', key: 11 },\n {\n label: '\u5d07\u6587\u533a',\n key: 12,\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: 14 },\n { label: '\u524d\u95e8\u8857\u9053', key: 15 },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: 16 },\n];\n\nconst datas =[\n { label: '\u4e0a\u6d77\u5e02', key: 0 },\n {\n label: '\u5317\u4eac\u5e02', key: 1,\n children:[\n { label: '\u4e1c\u57ce\u533a', key: 10 },\n ]\n },\n { label: '\u6210\u90fd\u5e02', key: 2 },\n]\n\nconst Demo = () => {\n\nconst [value,valueSet]=useState([{ label: '\u9ec4\u6d66\u533a', key: 12 }])\nconst [values,valuesSet]=useState([{ label: '\u5317\u4eac\u5e02', key: 1 }])\nconst [valueSinge,valueSingeSet]=useState([{ label: '\u4e0a\u6d77\u5e02', key: '1-0-0' }])\n\nconst onChange=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n valueSet(selectedAll)\n}\n\nconst onChanges=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n valuesSet(selectedAll)\n}\n\nconst onChangeSinge=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\n valueSingeSet(selectedAll)\n}\n\n return (\n <>\n <Row>\n <Col >\n <label>\u591a\u9009</label>\n <SearchTree\n style={{ width:300 }}\n allowClear={true}\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\n onChange={onChange}\n value={value}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </Col>\n </Row>\n <label>\u5355\u9009</label>\n <Row>\n <SearchTree\n style={{width:300}}\n loading={true}\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('singe',searchValue)}\n onChange={onChanges}\n value={values}\n options={datas}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n <Col style={{marginLeft:20}}>\n <SearchTree\n style={{width:300}}\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('singe',searchValue)}\n onChange={onChangeSinge}\n value={valueSinge}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </Col>\n </Row>\n </>\n )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7981\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { SearchTree } from 'uiw';\n\nconst data = [\n { label: '\u4e0a\u6d77\u5e02', key: 0 },\n {\n label: '\u5317\u4eac\u5e02', key: 1,\n children:[\n { label: '\u4e1c\u57ce\u533a', key: 10 },\n ]\n },\n { label: '\u6210\u90fd\u5e02', key: 2 },\n]\n\nconst Demo = () => {\n\n return(\n <SearchTree\n disabled={true}\n style={{ width:300 }}\n allowClear={true}\n value={[{ label: '\u4e1c\u57ce\u533a', key: 10 },{ label: '\u6210\u90fd\u5e02', key: 2 }]}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u5b9a\u4e49\u7a7a\u9009\u9879\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nconst Demo = () => {\n return(\n <>\n <SearchTree\n style={{ width:200 }}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n <SearchTree\n style={{ width:200,marginTop:5 }}\n emptyOption={<span>\u6682\u65e0\u6570\u636e..</span>}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Form, Button, SearchTree, Card, Row, Col } from 'uiw';;\n\n\nconst Demo = () => {\nconst form=useRef()\n\n const data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n {\n label: '\u5d07\u6587\u533a',\n key: '2-3-0',\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: '3' },\n ];\n\n const setValue=()=>{\n form.current.setFields({\n searchTree: [{ label: '\u4e1c\u57ce\u533a', key: '2-1-0' }, { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' }],\n searchTreeSinge:[{ label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' }]\n })\n }\n\n const resetValue=()=>{\n form.current.resetForm()\n }\n\n return (\n <div>\n <Form\n ref={form}\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.searchTree) {\n errorObj.searchTree = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n searchTree: {\n initialValue:[ { label: '\u9ec4\u6d66\u533a', key: '1-0-1' }, { label: '\u5362\u6e7e\u533a', key: '1-0-2' }],\n children: (\n <SearchTree\n allowClear={true}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n )\n },\n searchTreeSinge: {\n initialValue:[{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' }],\n children: (\n <SearchTree\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row style={{display:'flex',flexDirection:'column'}}>\n <div>\u591a\u9009</div>\n <Col >{fields.searchTree}</Col>\n </Row>\n <Row style={{display:'flex',flexDirection:'column'}}>\n <label>\u5355\u9009</label>\n <Col >{fields.searchTreeSinge}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button onClick={setValue} type=\"primary\" >setValue</Button>\n <Button onClick={resetValue} type=\"primary\" >\u91cd\u7f6e</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: 10, marginTop: 10 }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n );\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n\| \u53c2\u6570 \| \u8bf4\u660e \| \u7c7b\u578b \| \u9ed8\u8ba4\u503c \|\n\|--------- \|-------- \|--------- \|-------- \|\n\| allowClear \| \u652f\u6301\u6e05\u9664 \| Boolean \| `false` \|\n\| disabled \| \u7981\u7528\u9009\u62e9\u5668 \| Boolean \| `false` \|\n\| multiple \| \u662f\u5426\u53ef\u4ee5\u591a\u9009 \| Boolean \| `true` \|\n\| value \| \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee \| [{label:string, key:string}] \| - \|\n\| options \| \u4e0b\u62c9\u6570\u636e\u6e90,\u53ef\u53c2\u8003Tree\u4e0b\u62c9\u6570\u636e\u6e90 \| [{label:string, key:string, children: [{label:string, key:string}] }] \| - \|\n\| placeholder \| \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 \| String \| - \|\n\| size \| \u9009\u62e9\u6846\u5c3a\u5bf8 \| Enum{large, default, small } \| `default` \|\n\| onChange \| \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 \| function(selectd, selectdAll, isChecked)=>void \| - \|\n\| onSearch \| \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 \| function(searchValue) \| - \|\n\| loading \| \u52a0\u8f7d\u4e2d\u72b6\u6001 \| Boolean \| `false` \|\n\| emptyOption \| \u81ea\u5b9a\u4e49\u4e0b\u62c9\u9009\u9879\u4e3a\u7a7a\u65f6\u663e\u793a\u5185\u5bb9 \| React.ReactNode \| [Empty](https://uiwjs.github.io/#/components/empty) \|\n\n"}}]);
2	- //# sourceMappingURL=766.254f786a.chunk.js.map

package/web/static/js/766.254f786a.chunk.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"static/js/766.254f786a.chunk.js","mappings":"+GAAA","sources":["../../packages/react-search-tree/README.md"],"sourcesContent":["export default \"SearchTree 带搜索的Tree选择控件\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-tree)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-tree.svg?label=@uiw/react-search-tree)](https://npmjs.com/@uiw/react-search-tree)\\n\\n使用树选择控件可以完整展现其中的层级关系，并具有选中状态。新组件 v4.11.7+ 支持。\\n\\n```jsx\\nimport { SearchTree } from 'uiw';\\n// or\\nimport SearchTree from '@uiw/react-search-tree';\\n```\\n\\n### 基础实例\\n\\n\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { SearchTree } from 'uiw';\\n\\nconst data = [\\n {\\n label: '上海市',\\n key: 1,\\n children:[\\n { label: '黄浦区', key: 2 },\\n { label: '卢湾区', key: 3 },\\n {\\n label: '徐汇区',\\n key: 4,\\n children:[\\n { label: '半淞园路街道', key: 6 },\\n { label: '南京东路街道', key: 7 },\\n { label: '外滩街道', key: 8 },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: 9,\\n children:[\\n { label: '东城区', key: 10 },\\n { label: '西城区', key: 11 },\\n {\\n label: '崇文区',\\n key: 12,\\n children:[\\n { label: '东花市街道', key: 13 },\\n { label: '体育馆路街道', key: 14 },\\n { label: '前门街道', key: 15 },\\n ]\\n },\\n ]\\n },\\n { label: '澳门', key: 16 },\\n];\\n\\nconst datas =[\\n { label: '上海市', key: 0 },\\n {\\n label: '北京市', key: 1,\\n children:[\\n { label: '东城区', key: 10 },\\n ]\\n },\\n { label: '成都市', key: 2 },\\n]\\n\\nconst Demo = () => {\\n\\nconst [value,valueSet]=useState([{ label: '黄浦区', key: 12 }])\\nconst [values,valuesSet]=useState([{ label: '北京市', key: 1 }])\\nconst [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])\\n\\nconst onChange=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\\n valueSet(selectedAll)\\n}\\n\\nconst onChanges=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\\n valuesSet(selectedAll)\\n}\\n\\nconst onChangeSinge=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\\n valueSingeSet(selectedAll)\\n}\\n\\n return (\\n <>\\n <Row>\\n <Col >\\n <label>多选</label>\\n <SearchTree\\n style={{ width:300 }}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\\n onChange={onChange}\\n value={value}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </Col>\\n </Row>\\n <label>单选</label>\\n <Row>\\n <SearchTree\\n style={{width:300}}\\n loading={true}\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('singe',searchValue)}\\n onChange={onChanges}\\n value={values}\\n options={datas}\\n placeholder=\\\"请输入选择\\\"\\n />\\n <Col style={{marginLeft:20}}>\\n <SearchTree\\n style={{width:300}}\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('singe',searchValue)}\\n onChange={onChangeSinge}\\n value={valueSinge}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </Col>\\n </Row>\\n </>\\n )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 禁用\\n\\n\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { SearchTree } from 'uiw';\\n\\nconst data = [\\n { label: '上海市', key: 0 },\\n {\\n label: '北京市', key: 1,\\n children:[\\n { label: '东城区', key: 10 },\\n ]\\n },\\n { label: '成都市', key: 2 },\\n]\\n\\nconst Demo = () => {\\n\\n return(\\n <SearchTree\\n disabled={true}\\n style={{ width:300 }}\\n allowClear={true}\\n value={[{ label: '东城区', key: 10 },{ label: '成都市', key: 2 }]}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自定义空选项\\n\\n\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport { SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n return(\\n <>\\n <SearchTree\\n style={{ width:200 }}\\n placeholder=\\\"请输入选择\\\"\\n />\\n <SearchTree\\n style={{ width:200,marginTop:5 }}\\n emptyOption={<span>暂无数据..</span>}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form中使用\\n\\n\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Form, Button, SearchTree, Card, Row, Col } from 'uiw';;\\n\\n\\nconst Demo = () => {\\nconst form=useRef()\\n\\n const data = [\\n {\\n label: '上海市',\\n key: '1-0-0',\\n children:[\\n { label: '黄浦区', key: '1-0-1' },\\n { label: '卢湾区', key: '1-0-2' },\\n {\\n label: '徐汇区',\\n key: '1-0-3',\\n children:[\\n { label: '半淞园路街道', key: '1-1-0' },\\n { label: '南京东路街道', key: '1-2-0' },\\n { label: '外滩街道', key: '1-3-0' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: '2-0-0',\\n children:[\\n { label: '东城区', key: '2-1-0' },\\n { label: '西城区', key: '2-2-0' },\\n {\\n label: '崇文区',\\n key: '2-3-0',\\n children:[\\n { label: '东花市街道', key: '2-3-1' },\\n { label: '体育馆路街道', key: '2-3-2' },\\n { label: '前门街道', key: '2-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '澳门', key: '3' },\\n ];\\n\\n const setValue=()=>{\\n form.current.setFields({\\n searchTree: [{ label: '东城区', key: '2-1-0' }, { label: '外滩街道', key: '1-3-0' }],\\n searchTreeSinge:[{ label: '前门街道', key: '2-3-3' }]\\n })\\n }\\n\\n const resetValue=()=>{\\n form.current.resetForm()\\n }\\n\\n return (\\n <div>\\n <Form\\n ref={form}\\n onSubmitError={(error) => {\\n if (error.filed) {\\n return { ...error.filed };\\n }\\n return null;\\n }}\\n onSubmit={({initial, current}) => {\\n const errorObj = {};\\n if (!current.searchTree) {\\n errorObj.searchTree = '默认需要选择内容，选择入内容';\\n }\\n if(Object.keys(errorObj).length > 0) {\\n const err = new Error();\\n err.filed = errorObj;\\n Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });\\n throw err;\\n }\\n Notify.success({\\n title: '提交成功！',\\n description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,\\n });\\n }}\\n fields={{\\n searchTree: {\\n initialValue:[ { label: '黄浦区', key: '1-0-1' }, { label: '卢湾区', key: '1-0-2' }],\\n children: (\\n <SearchTree\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n )\\n },\\n searchTreeSinge: {\\n initialValue:[{ label: '东花市街道', key: '2-3-1' }],\\n children: (\\n <SearchTree\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n )\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div>\\n <Row style={{display:'flex',flexDirection:'column'}}>\\n <div>多选</div>\\n <Col >{fields.searchTree}</Col>\\n </Row>\\n <Row style={{display:'flex',flexDirection:'column'}}>\\n <label>单选</label>\\n <Col >{fields.searchTreeSinge}</Col>\\n </Row>\\n <Row>\\n <Col fixed>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n <Button onClick={setValue} type=\\\"primary\\\" >setValue</Button>\\n <Button onClick={resetValue} type=\\\"primary\\\" >重置</Button>\\n </Col>\\n </Row>\\n <Row>\\n <Col>\\n <pre style={{ padding: 10, marginTop: 10 }}>\\n {JSON.stringify(state.current, null, 2)}\\n </pre>\\n </Col>\\n </Row>\\n </div>\\n )\\n }}\\n </Form>\\n </div>\\n );\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| allowClear | 支持清除 | Boolean | `false` |\\n| disabled | 禁用选择器 | Boolean | `false` |\\n| multiple | 是否可以多选 | Boolean | `true` |\\n| value | 指定当前选中的条目 | [{label:string, key:string}] | - |\\n| options | 下拉数据源,可参考Tree下拉数据源 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\\n| placeholder | 选择框默认文字 | String | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(selectd, selectdAll, isChecked)=>void | - |\\n| onSearch | 文本框值变化时回调 | function(searchValue) | - |\\n| loading | 加载中状态 | Boolean | `false` |\\n| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |\\n\\n\";"],"names":[],"sourceRoot":""}