uxcore.js - React UI Component Set

组件演示

[{"title":"基本","id":"components-cascade-multi-select-demo-basic","tags":[],"filepath":"site/components/cascade-multi-select/demo/basic.md","directory":"components/cascade-multi-select/demo","filename":"basic","meta":{"title":"基本","description":"\n最简单的用法。\n","order":"0","filepath":"site/components/cascade-multi-select/demo/basic.md","filename":"basic","directory":"components/cascade-multi-select/demo","id":"components-cascade-multi-select-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar options = [{\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }, {\n value: 'bingjiang',\n label: '滨江'\n }]\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山'\n }]\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华'\n }]\n }, {\n value: 'changxing',\n label: '长兴',\n children: []\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: []\n }, {\n value: 'wenzhou',\n label: '温州'\n }, {\n value: 'lishui',\n label: '丽水',\n children: []\n }, {\n value: 'linan',\n label: '临安',\n children: []\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉'\n }]\n }]\n}, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0'\n }]\n }]\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n demo1: ['shanghai']\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n { style: { margin: 15 } },\n React.createElement(_uxcore.CascadeMultiSelect, {\n className: 'ucms-input',\n dropdownClassName: 'ucms-drop',\n options: options,\n onSelect: function onSelect(valueList, labelList, leafList) {\n console.log(valueList, labelList, leafList);\n _this2.setState({ demo1: valueList });\n },\n onOk: function onOk(valueList, labelList, leafList) {\n console.log(valueList, labelList, leafList);\n },\n value: this.state.demo1\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-multi-select-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeMultiSelect } from 'uxcore';\nconst options = [\n {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }, {\n value: 'bingjiang',\n label: '滨江',\n }],\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山',\n }],\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华',\n }],\n }, {\n value: 'changxing',\n label: '长兴',\n children: [],\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: [],\n }, {\n value: 'wenzhou',\n label: '温州',\n }, {\n value: 'lishui',\n label: '丽水',\n children: [],\n }, {\n value: 'linan',\n label: '临安',\n children: [],\n }],\n }, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n }, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉',\n }],\n }],\n }, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0',\n }],\n }],\n },\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n demo1: ['shanghai'],\n };\n }\n\n render() {\n return (\n <div style={{ margin: 15 }}>\n <CascadeMultiSelect\n className={'ucms-input'}\n dropdownClassName={'ucms-drop'}\n options={options}\n onSelect={(valueList, labelList, leafList) => {\n console.log(valueList, labelList, leafList);\n this.setState({ demo1: valueList });\n }}\n onOk={(valueList, labelList, leafList) => {\n console.log(valueList, labelList, leafList);\n }}\n value={this.state.demo1}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-cascade-multi-select-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"禁用","id":"components-cascade-multi-select-demo-disabled","tags":[],"filepath":"site/components/cascade-multi-select/demo/disabled.md","directory":"components/cascade-multi-select/demo","filename":"disabled","meta":{"title":"禁用","description":"\n","order":"1","filepath":"site/components/cascade-multi-select/demo/disabled.md","filename":"disabled","directory":"components/cascade-multi-select/demo","id":"components-cascade-multi-select-demo-disabled","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar options2 = [{\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }, {\n value: 'bingjiang',\n label: '滨江'\n }, {\n value: 'shangcheng',\n label: '上城'\n }, {\n value: 'yuhang',\n label: '余杭'\n }, {\n value: 'linping',\n label: '临平'\n }]\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山'\n }]\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华'\n }]\n }, {\n value: 'changxing',\n label: '长兴',\n children: [{\n value: 'changxingnan',\n label: '长兴南'\n }, {\n value: 'changxingbei',\n label: '长兴北'\n }]\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: []\n }, {\n value: 'wenzhou',\n label: '温州',\n children: []\n }, {\n value: 'lishui',\n label: '丽水',\n children: []\n }, {\n value: 'linan',\n label: '临安',\n children: []\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}, {\n value: 'anhui',\n label: '安徽',\n children: [{\n value: 'hefei',\n label: '合肥',\n children: [{\n value: 'dashushan',\n label: '大蜀山'\n }]\n }]\n}, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉'\n }]\n }]\n}, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0'\n }]\n }]\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n demo3: ['xihu']\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { margin: 15 } },\n React.createElement(_uxcore.CascadeMultiSelect, {\n options: options2,\n value: this.state.demo3,\n disabled: true\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-multi-select-demo-disabled'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeMultiSelect } from 'uxcore';\nconst options2 = [\n {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }, {\n value: 'bingjiang',\n label: '滨江',\n }, {\n value: 'shangcheng',\n label: '上城',\n }, {\n value: 'yuhang',\n label: '余杭',\n }, {\n value: 'linping',\n label: '临平',\n }],\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山',\n }],\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华',\n }],\n }, {\n value: 'changxing',\n label: '长兴',\n children: [{\n value: 'changxingnan',\n label: '长兴南',\n }, {\n value: 'changxingbei',\n label: '长兴北',\n }],\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: [],\n }, {\n value: 'wenzhou',\n label: '温州',\n children: [],\n }, {\n value: 'lishui',\n label: '丽水',\n children: [],\n }, {\n value: 'linan',\n label: '临安',\n children: [],\n }],\n }, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n }, {\n value: 'anhui',\n label: '安徽',\n children: [{\n value: 'hefei',\n label: '合肥',\n children: [{\n value: 'dashushan',\n label: '大蜀山',\n }],\n }],\n }, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉',\n }],\n }],\n }, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0',\n }],\n }],\n },\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n demo3: ['xihu'],\n };\n }\n\n render() {\n return (\n <div style={{ margin: 15 }}>\n <CascadeMultiSelect\n options={options2}\n value={this.state.demo3}\n disabled\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-cascade-multi-select-demo-disabled'));</code></pre></div>"},"status":"public","toc":""},{"title":"禁选前两级","id":"components-cascade-multi-select-demo-disabled2level","tags":[],"filepath":"site/components/cascade-multi-select/demo/disabled2level.md","directory":"components/cascade-multi-select/demo","filename":"disabled2level","meta":{"title":"禁选前两级","description":"\n设置前两级 checkable: false\n","order":"2","filepath":"site/components/cascade-multi-select/demo/disabled2level.md","filename":"disabled2level","directory":"components/cascade-multi-select/demo","id":"components-cascade-multi-select-demo-disabled2level","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar options2 = [{\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }, {\n value: 'bingjiang',\n label: '滨江'\n }, {\n value: 'shangcheng',\n label: '上城'\n }, {\n value: 'yuhang',\n label: '余杭'\n }, {\n value: 'linping',\n label: '临平'\n }]\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山'\n }]\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华'\n }]\n }, {\n value: 'changxing',\n label: '长兴',\n children: [{\n value: 'changxingnan',\n label: '长兴南'\n }, {\n value: 'changxingbei',\n label: '长兴北'\n }]\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: []\n }, {\n value: 'wenzhou',\n label: '温州',\n children: []\n }, {\n value: 'lishui',\n label: '丽水',\n children: []\n }, {\n value: 'linan',\n label: '临安',\n children: []\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}, {\n value: 'anhui',\n label: '安徽',\n children: [{\n value: 'hefei',\n label: '合肥',\n children: [{\n value: 'dashushan',\n label: '大蜀山'\n }]\n }]\n}, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉'\n }]\n }]\n}, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0'\n }]\n }]\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n demo5: ['bingjiang', 'ningbo', 'anhui', 'shandong']\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { margin: 15 } },\n React.createElement(_uxcore.CascadeMultiSelect, {\n config: [{\n checkable: false\n }, {\n checkable: false\n }, {}],\n options: options2,\n value: this.state.demo5\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-multi-select-demo-disabled2level'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeMultiSelect } from 'uxcore';\nconst options2 = [\n {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }, {\n value: 'bingjiang',\n label: '滨江',\n }, {\n value: 'shangcheng',\n label: '上城',\n }, {\n value: 'yuhang',\n label: '余杭',\n }, {\n value: 'linping',\n label: '临平',\n }],\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山',\n }],\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华',\n }],\n }, {\n value: 'changxing',\n label: '长兴',\n children: [{\n value: 'changxingnan',\n label: '长兴南',\n }, {\n value: 'changxingbei',\n label: '长兴北',\n }],\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: [],\n }, {\n value: 'wenzhou',\n label: '温州',\n children: [],\n }, {\n value: 'lishui',\n label: '丽水',\n children: [],\n }, {\n value: 'linan',\n label: '临安',\n children: [],\n }],\n }, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n }, {\n value: 'anhui',\n label: '安徽',\n children: [{\n value: 'hefei',\n label: '合肥',\n children: [{\n value: 'dashushan',\n label: '大蜀山',\n }],\n }],\n }, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉',\n }],\n }],\n }, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0',\n }],\n }],\n },\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n demo5: ['bingjiang', 'ningbo', 'anhui', 'shandong'],\n };\n }\n\n render() {\n return (\n <div style={{ margin: 15 }}>\n <CascadeMultiSelect\n config={\n [{\n checkable: false,\n }, {\n checkable: false,\n }, {}]\n }\n options={options2}\n value={this.state.demo5}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-cascade-multi-select-demo-disabled2level'));</code></pre></div>"},"status":"public","toc":""},{"title":"选项异步","id":"components-cascade-multi-select-demo-async","tags":[],"filepath":"site/components/cascade-multi-select/demo/async.md","directory":"components/cascade-multi-select/demo","filename":"async","meta":{"title":"选项异步","description":"\n","order":"3","filepath":"site/components/cascade-multi-select/demo/async.md","filename":"async","directory":"components/cascade-multi-select/demo","id":"components-cascade-multi-select-demo-async","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar options2 = [{\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }, {\n value: 'bingjiang',\n label: '滨江'\n }, {\n value: 'shangcheng',\n label: '上城'\n }, {\n value: 'yuhang',\n label: '余杭'\n }, {\n value: 'linping',\n label: '临平'\n }]\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山'\n }]\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华'\n }]\n }, {\n value: 'changxing',\n label: '长兴',\n children: [{\n value: 'changxingnan',\n label: '长兴南'\n }, {\n value: 'changxingbei',\n label: '长兴北'\n }]\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: []\n }, {\n value: 'wenzhou',\n label: '温州',\n children: []\n }, {\n value: 'lishui',\n label: '丽水',\n children: []\n }, {\n value: 'linan',\n label: '临安',\n children: []\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}, {\n value: 'anhui',\n label: '安徽',\n children: [{\n value: 'hefei',\n label: '合肥',\n children: [{\n value: 'dashushan',\n label: '大蜀山'\n }]\n }]\n}, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉'\n }]\n }]\n}, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0'\n }]\n }]\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n demo6: ['xihu']\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n { style: { marginLeft: 20 } },\n React.createElement(\n 'h3',\n null,\n '\\u6570\\u636E\\u5F02\\u6B65'\n ),\n React.createElement(\n 'p',\n null,\n '\\uFF08\\u624B\\u52A8\\u5F02\\u6B65\\u6570\\u636E\\uFF09'\n ),\n React.createElement(\n 'p',\n null,\n React.createElement(\n _uxcore.Button,\n {\n onClick: function onClick() {\n _this2.setState({\n demo6: ['xihu'],\n asyncOptions6: options2\n });\n }\n },\n 'async'\n ),\n '\\xA0',\n React.createElement(\n _uxcore.Button,\n {\n onClick: function onClick() {\n _this2.setState({\n demo6: ['xihu'],\n asyncOptions6: options\n });\n }\n },\n 'init'\n )\n ),\n React.createElement(\n 'p',\n null,\n '\\u70B9\\u51FBasync\\u66F4\\u65B0options\\u548Cvalue'\n ),\n React.createElement(\n 'p',\n null,\n '\\u70B9\\u51FB\\u6D59\\u6C5F/\\u676D\\u5DDE/\\u957F\\u5174\\uFF0C\\u6DFB\\u52A0\\u957F\\u5174\\u7684\\u5B50\\u96C6(\\u539F\\u6CA1\\u6709\\u6570\\u636E)'\n )\n ),\n React.createElement(\n 'div',\n { style: { position: 'relative', margin: 15 } },\n React.createElement(_uxcore.CascadeMultiSelect, {\n options: this.state.asyncOptions6,\n value: this.state.demo6,\n onSelect: function onSelect(valueList) {\n _this2.setState({ demo6: valueList });\n },\n onItemClick: function onItemClick(item) {\n console.log('onItemClick', item);\n if (item.value === 'changxing') {\n _this2.setState({\n asyncOptions6: options2\n });\n }\n }\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-multi-select-demo-async'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeMultiSelect } from 'uxcore';\nimport { Button } from 'uxcore';\nconst options2 = [\n {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }, {\n value: 'bingjiang',\n label: '滨江',\n }, {\n value: 'shangcheng',\n label: '上城',\n }, {\n value: 'yuhang',\n label: '余杭',\n }, {\n value: 'linping',\n label: '临平',\n }],\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山',\n }],\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华',\n }],\n }, {\n value: 'changxing',\n label: '长兴',\n children: [{\n value: 'changxingnan',\n label: '长兴南',\n }, {\n value: 'changxingbei',\n label: '长兴北',\n }],\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: [],\n }, {\n value: 'wenzhou',\n label: '温州',\n children: [],\n }, {\n value: 'lishui',\n label: '丽水',\n children: [],\n }, {\n value: 'linan',\n label: '临安',\n children: [],\n }],\n }, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n }, {\n value: 'anhui',\n label: '安徽',\n children: [{\n value: 'hefei',\n label: '合肥',\n children: [{\n value: 'dashushan',\n label: '大蜀山',\n }],\n }],\n }, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉',\n }],\n }],\n }, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0',\n }],\n }],\n },\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n demo6: ['xihu'],\n };\n }\n\n render() {\n return (\n <div>\n <div style={{ marginLeft: 20 }}>\n <h3>数据异步</h3>\n <p>\n （手动异步数据）\n </p>\n <p>\n <Button\n onClick={() => {\n this.setState({\n demo6: ['xihu'],\n asyncOptions6: options2,\n });\n }}\n >\n async\n </Button>\n &nbsp;\n <Button\n onClick={() => {\n this.setState({\n demo6: ['xihu'],\n asyncOptions6: options,\n });\n }}\n >init</Button>\n </p>\n <p>点击async更新options和value</p>\n <p>点击浙江/杭州/长兴，添加长兴的子集(原没有数据)</p>\n </div>\n <div style={{ position: 'relative', margin: 15 }}>\n <CascadeMultiSelect\n options={this.state.asyncOptions6}\n value={this.state.demo6}\n onSelect={(valueList) => {\n this.setState({ demo6: valueList });\n }}\n onItemClick={(item) => {\n console.log('onItemClick', item);\n if (item.value === 'changxing') {\n this.setState({\n asyncOptions6: options2,\n });\n }\n }}\n />\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-cascade-multi-select-demo-async'));</code></pre></div>"},"status":"public","toc":""},{"title":"直接使用面板","id":"components-cascade-multi-select-demo-panel","tags":[],"filepath":"site/components/cascade-multi-select/demo/panel.md","directory":"components/cascade-multi-select/demo","filename":"panel","meta":{"title":"直接使用面板","description":"\n","order":"4","filepath":"site/components/cascade-multi-select/demo/panel.md","filename":"panel","directory":"components/cascade-multi-select/demo","id":"components-cascade-multi-select-demo-panel","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar CascadeMultiPanel = _uxcore.CascadeMultiSelect.CascadeMultiPanel;\n\nvar options2 = [{\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }, {\n value: 'bingjiang',\n label: '滨江'\n }, {\n value: 'shangcheng',\n label: '上城'\n }, {\n value: 'yuhang',\n label: '余杭'\n }, {\n value: 'linping',\n label: '临平'\n }]\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山'\n }]\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华'\n }]\n }, {\n value: 'changxing',\n label: '长兴',\n children: [{\n value: 'changxingnan',\n label: '长兴南'\n }, {\n value: 'changxingbei',\n label: '长兴北'\n }]\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: []\n }, {\n value: 'wenzhou',\n label: '温州',\n children: []\n }, {\n value: 'lishui',\n label: '丽水',\n children: []\n }, {\n value: 'linan',\n label: '临安',\n children: []\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}, {\n value: 'anhui',\n label: '安徽',\n children: [{\n value: 'hefei',\n label: '合肥',\n children: [{\n value: 'dashushan',\n label: '大蜀山'\n }]\n }]\n}, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉'\n }]\n }]\n}, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0'\n }]\n }]\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n demo9: ['bingjiang', 'ningbo', 'anhui', 'shandong', 'jiangsu', 'longname-0']\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n { style: { margin: 15 } },\n React.createElement(\n 'div',\n { style: { position: 'relative', margin: 15 } },\n React.createElement(CascadeMultiPanel, {\n options: options2,\n value: this.state.demo9,\n onSelect: function onSelect(valueList, labelList, leafList) {\n console.log(leafList);\n _this2.setState({\n demo9: valueList\n });\n },\n className: 'ucms-panel'\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-multi-select-demo-panel'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeMultiSelect } from 'uxcore';\nconst { CascadeMultiPanel } = CascadeMultiSelect;\nconst options2 = [\n {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }, {\n value: 'bingjiang',\n label: '滨江',\n }, {\n value: 'shangcheng',\n label: '上城',\n }, {\n value: 'yuhang',\n label: '余杭',\n }, {\n value: 'linping',\n label: '临平',\n }],\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山',\n }],\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华',\n }],\n }, {\n value: 'changxing',\n label: '长兴',\n children: [{\n value: 'changxingnan',\n label: '长兴南',\n }, {\n value: 'changxingbei',\n label: '长兴北',\n }],\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: [],\n }, {\n value: 'wenzhou',\n label: '温州',\n children: [],\n }, {\n value: 'lishui',\n label: '丽水',\n children: [],\n }, {\n value: 'linan',\n label: '临安',\n children: [],\n }],\n }, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n }, {\n value: 'anhui',\n label: '安徽',\n children: [{\n value: 'hefei',\n label: '合肥',\n children: [{\n value: 'dashushan',\n label: '大蜀山',\n }],\n }],\n }, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉',\n }],\n }],\n }, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0',\n }],\n }],\n },\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n demo9: ['bingjiang', 'ningbo', 'anhui', 'shandong', 'jiangsu', 'longname-0'],\n };\n }\n\n render() {\n return (\n <div style={{ margin: 15 }}>\n <div style={{ position: 'relative', margin: 15 }}>\n <CascadeMultiPanel\n options={options2}\n value={this.state.demo9}\n onSelect={(valueList, labelList, leafList) => {\n console.log(leafList);\n this.setState({\n demo9: valueList,\n });\n }}\n className={'ucms-panel'}\n />\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-cascade-multi-select-demo-panel'));</code></pre></div>"},"status":"public","toc":""},{"title":"以 Dialog 的形式弹出","id":"components-cascade-multi-select-demo-modal","tags":[],"filepath":"site/components/cascade-multi-select/demo/modal.md","directory":"components/cascade-multi-select/demo","filename":"modal","meta":{"title":"以 Dialog 的形式弹出","description":"\n","order":"5","filepath":"site/components/cascade-multi-select/demo/modal.md","filename":"modal","directory":"components/cascade-multi-select/demo","id":"components-cascade-multi-select-demo-modal","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar CascadeMultiModal = _uxcore.CascadeMultiSelect.CascadeMultiModal;\n\nvar options2 = [{\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }, {\n value: 'bingjiang',\n label: '滨江'\n }, {\n value: 'shangcheng',\n label: '上城'\n }, {\n value: 'yuhang',\n label: '余杭'\n }, {\n value: 'linping',\n label: '临平'\n }]\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山'\n }]\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华'\n }]\n }, {\n value: 'changxing',\n label: '长兴',\n children: [{\n value: 'changxingnan',\n label: '长兴南'\n }, {\n value: 'changxingbei',\n label: '长兴北'\n }]\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: []\n }, {\n value: 'wenzhou',\n label: '温州',\n children: []\n }, {\n value: 'lishui',\n label: '丽水',\n children: []\n }, {\n value: 'linan',\n label: '临安',\n children: []\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}, {\n value: 'anhui',\n label: '安徽',\n children: [{\n value: 'hefei',\n label: '合肥',\n children: [{\n value: 'dashushan',\n label: '大蜀山'\n }]\n }]\n}, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉'\n }]\n }]\n}, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0'\n }]\n }]\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n demo10: ['bingjiang', 'ningbo', 'anhui', 'shandong', 'jiangsu', 'longname-0']\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n { style: { margin: 15 } },\n React.createElement(CascadeMultiModal, {\n className: 'ucms-modal',\n options: options2,\n value: this.state.demo10,\n onOk: function onOk(valueList, labelList, leafList) {\n console.log(valueList, labelList, leafList);\n _this2.setState({ demo10: valueList });\n }\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-multi-select-demo-modal'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeMultiSelect } from 'uxcore';\nconst { CascadeMultiModal } = CascadeMultiSelect;\nconst options2 = [\n {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }, {\n value: 'bingjiang',\n label: '滨江',\n }, {\n value: 'shangcheng',\n label: '上城',\n }, {\n value: 'yuhang',\n label: '余杭',\n }, {\n value: 'linping',\n label: '临平',\n }],\n }, {\n value: 'ningbo',\n label: '宁波',\n children: [{\n value: 'zhoushan',\n label: '舟山',\n }],\n }, {\n value: 'yiwu',\n label: '义乌',\n children: [{\n value: 'jinhua',\n label: '金华',\n }],\n }, {\n value: 'changxing',\n label: '长兴',\n children: [{\n value: 'changxingnan',\n label: '长兴南',\n }, {\n value: 'changxingbei',\n label: '长兴北',\n }],\n }, {\n value: 'jiaxing',\n label: '嘉兴',\n children: [],\n }, {\n value: 'wenzhou',\n label: '温州',\n children: [],\n }, {\n value: 'lishui',\n label: '丽水',\n children: [],\n }, {\n value: 'linan',\n label: '临安',\n children: [],\n }],\n }, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n }, {\n value: 'anhui',\n label: '安徽',\n children: [{\n value: 'hefei',\n label: '合肥',\n children: [{\n value: 'dashushan',\n label: '大蜀山',\n }],\n }],\n }, {\n value: 'shandong',\n label: '山东',\n children: [{\n value: 'jinan',\n label: '济南',\n children: [{\n value: 'baotuquan',\n label: '趵突泉',\n }],\n }],\n }, {\n value: 'longname-0',\n label: '名称很长的选项展示效果0',\n children: [{\n value: 'longname-0-0',\n label: '名称很长的选项展示效果0-0',\n children: [{\n value: 'longname-0-0-0',\n label: '名称很长的选项展示效果0-0-0',\n }],\n }],\n },\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n demo10: ['bingjiang', 'ningbo', 'anhui', 'shandong', 'jiangsu', 'longname-0'],\n };\n }\n\n render() {\n return (\n <div style={{ margin: 15 }}>\n <CascadeMultiModal\n className={'ucms-modal'}\n options={options2}\n value={this.state.demo10}\n onOk={(valueList, labelList, leafList) => {\n console.log(valueList, labelList, leafList);\n this.setState({ demo10: valueList });\n }}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-cascade-multi-select-demo-modal'));</code></pre></div>"},"status":"public","toc":""}]

基本

最简单的用法。

import { CascadeMultiSelect } from 'uxcore';
const options = [
  {
    value: 'zhejiang',
    label: '浙江',
    children: [{
      value: 'hangzhou',
      label: '杭州',
      children: [{
        value: 'xihu',
        label: '西湖',
      }, {
        value: 'bingjiang',
        label: '滨江',
      }],
    }, {
      value: 'ningbo',
      label: '宁波',
      children: [{
        value: 'zhoushan',
        label: '舟山',
      }],
    }, {
      value: 'yiwu',
      label: '义乌',
      children: [{
        value: 'jinhua',
        label: '金华',
      }],
    }, {
      value: 'changxing',
      label: '长兴',
      children: [],
    }, {
      value: 'jiaxing',
      label: '嘉兴',
      children: [],
    }, {
      value: 'wenzhou',
      label: '温州',
    }, {
      value: 'lishui',
      label: '丽水',
      children: [],
    }, {
      value: 'linan',
      label: '临安',
      children: [],
    }],
  }, {
    value: 'jiangsu',
    label: '江苏',
    children: [{
      value: 'nanjing',
      label: '南京',
      children: [{
        value: 'zhonghuamen',
        label: '中华门',
      }],
    }],
  }, {
    value: 'shandong',
    label: '山东',
    children: [{
      value: 'jinan',
      label: '济南',
      children: [{
        value: 'baotuquan',
        label: '趵突泉',
      }],
    }],
  }, {
    value: 'longname-0',
    label: '名称很长的选项展示效果0',
    children: [{
      value: 'longname-0-0',
      label: '名称很长的选项展示效果0-0',
      children: [{
        value: 'longname-0-0-0',
        label: '名称很长的选项展示效果0-0-0',
      }],
    }],
  },
];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      demo1: ['shanghai'],
    };
  }

  render() {
    return (
      <div style={{ margin: 15 }}>
        <CascadeMultiSelect
          className={'ucms-input'}
          dropdownClassName={'ucms-drop'}
          options={options}
          onSelect={(valueList, labelList, leafList) => {
            console.log(valueList, labelList, leafList);
            this.setState({ demo1: valueList });
          }}
          onOk={(valueList, labelList, leafList) => {
            console.log(valueList, labelList, leafList);
          }}
          value={this.state.demo1}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-multi-select-demo-basic'));

禁用

import { CascadeMultiSelect } from 'uxcore';
const options2 = [
  {
    value: 'zhejiang',
    label: '浙江',
    children: [{
      value: 'hangzhou',
      label: '杭州',
      children: [{
        value: 'xihu',
        label: '西湖',
      }, {
        value: 'bingjiang',
        label: '滨江',
      }, {
        value: 'shangcheng',
        label: '上城',
      }, {
        value: 'yuhang',
        label: '余杭',
      }, {
        value: 'linping',
        label: '临平',
      }],
    }, {
      value: 'ningbo',
      label: '宁波',
      children: [{
        value: 'zhoushan',
        label: '舟山',
      }],
    }, {
      value: 'yiwu',
      label: '义乌',
      children: [{
        value: 'jinhua',
        label: '金华',
      }],
    }, {
      value: 'changxing',
      label: '长兴',
      children: [{
        value: 'changxingnan',
        label: '长兴南',
      }, {
        value: 'changxingbei',
        label: '长兴北',
      }],
    }, {
      value: 'jiaxing',
      label: '嘉兴',
      children: [],
    }, {
      value: 'wenzhou',
      label: '温州',
      children: [],
    }, {
      value: 'lishui',
      label: '丽水',
      children: [],
    }, {
      value: 'linan',
      label: '临安',
      children: [],
    }],
  }, {
    value: 'jiangsu',
    label: '江苏',
    children: [{
      value: 'nanjing',
      label: '南京',
      children: [{
        value: 'zhonghuamen',
        label: '中华门',
      }],
    }],
  }, {
    value: 'anhui',
    label: '安徽',
    children: [{
      value: 'hefei',
      label: '合肥',
      children: [{
        value: 'dashushan',
        label: '大蜀山',
      }],
    }],
  }, {
    value: 'shandong',
    label: '山东',
    children: [{
      value: 'jinan',
      label: '济南',
      children: [{
        value: 'baotuquan',
        label: '趵突泉',
      }],
    }],
  }, {
    value: 'longname-0',
    label: '名称很长的选项展示效果0',
    children: [{
      value: 'longname-0-0',
      label: '名称很长的选项展示效果0-0',
      children: [{
        value: 'longname-0-0-0',
        label: '名称很长的选项展示效果0-0-0',
      }],
    }],
  },
];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      demo3: ['xihu'],
    };
  }

  render() {
    return (
      <div style={{ margin: 15 }}>
        <CascadeMultiSelect
          options={options2}
          value={this.state.demo3}
          disabled
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-multi-select-demo-disabled'));

禁选前两级

设置前两级 checkable: false

import { CascadeMultiSelect } from 'uxcore';
const options2 = [
  {
    value: 'zhejiang',
    label: '浙江',
    children: [{
      value: 'hangzhou',
      label: '杭州',
      children: [{
        value: 'xihu',
        label: '西湖',
      }, {
        value: 'bingjiang',
        label: '滨江',
      }, {
        value: 'shangcheng',
        label: '上城',
      }, {
        value: 'yuhang',
        label: '余杭',
      }, {
        value: 'linping',
        label: '临平',
      }],
    }, {
      value: 'ningbo',
      label: '宁波',
      children: [{
        value: 'zhoushan',
        label: '舟山',
      }],
    }, {
      value: 'yiwu',
      label: '义乌',
      children: [{
        value: 'jinhua',
        label: '金华',
      }],
    }, {
      value: 'changxing',
      label: '长兴',
      children: [{
        value: 'changxingnan',
        label: '长兴南',
      }, {
        value: 'changxingbei',
        label: '长兴北',
      }],
    }, {
      value: 'jiaxing',
      label: '嘉兴',
      children: [],
    }, {
      value: 'wenzhou',
      label: '温州',
      children: [],
    }, {
      value: 'lishui',
      label: '丽水',
      children: [],
    }, {
      value: 'linan',
      label: '临安',
      children: [],
    }],
  }, {
    value: 'jiangsu',
    label: '江苏',
    children: [{
      value: 'nanjing',
      label: '南京',
      children: [{
        value: 'zhonghuamen',
        label: '中华门',
      }],
    }],
  }, {
    value: 'anhui',
    label: '安徽',
    children: [{
      value: 'hefei',
      label: '合肥',
      children: [{
        value: 'dashushan',
        label: '大蜀山',
      }],
    }],
  }, {
    value: 'shandong',
    label: '山东',
    children: [{
      value: 'jinan',
      label: '济南',
      children: [{
        value: 'baotuquan',
        label: '趵突泉',
      }],
    }],
  }, {
    value: 'longname-0',
    label: '名称很长的选项展示效果0',
    children: [{
      value: 'longname-0-0',
      label: '名称很长的选项展示效果0-0',
      children: [{
        value: 'longname-0-0-0',
        label: '名称很长的选项展示效果0-0-0',
      }],
    }],
  },
];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      demo5: ['bingjiang', 'ningbo', 'anhui', 'shandong'],
    };
  }

  render() {
    return (
      <div style={{ margin: 15 }}>
        <CascadeMultiSelect
          config={
          [{
            checkable: false,
          }, {
            checkable: false,
          }, {}]
            }
          options={options2}
          value={this.state.demo5}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-multi-select-demo-disabled2level'));

选项异步

import { CascadeMultiSelect } from 'uxcore';
import { Button } from 'uxcore';
const options2 = [
  {
    value: 'zhejiang',
    label: '浙江',
    children: [{
      value: 'hangzhou',
      label: '杭州',
      children: [{
        value: 'xihu',
        label: '西湖',
      }, {
        value: 'bingjiang',
        label: '滨江',
      }, {
        value: 'shangcheng',
        label: '上城',
      }, {
        value: 'yuhang',
        label: '余杭',
      }, {
        value: 'linping',
        label: '临平',
      }],
    }, {
      value: 'ningbo',
      label: '宁波',
      children: [{
        value: 'zhoushan',
        label: '舟山',
      }],
    }, {
      value: 'yiwu',
      label: '义乌',
      children: [{
        value: 'jinhua',
        label: '金华',
      }],
    }, {
      value: 'changxing',
      label: '长兴',
      children: [{
        value: 'changxingnan',
        label: '长兴南',
      }, {
        value: 'changxingbei',
        label: '长兴北',
      }],
    }, {
      value: 'jiaxing',
      label: '嘉兴',
      children: [],
    }, {
      value: 'wenzhou',
      label: '温州',
      children: [],
    }, {
      value: 'lishui',
      label: '丽水',
      children: [],
    }, {
      value: 'linan',
      label: '临安',
      children: [],
    }],
  }, {
    value: 'jiangsu',
    label: '江苏',
    children: [{
      value: 'nanjing',
      label: '南京',
      children: [{
        value: 'zhonghuamen',
        label: '中华门',
      }],
    }],
  }, {
    value: 'anhui',
    label: '安徽',
    children: [{
      value: 'hefei',
      label: '合肥',
      children: [{
        value: 'dashushan',
        label: '大蜀山',
      }],
    }],
  }, {
    value: 'shandong',
    label: '山东',
    children: [{
      value: 'jinan',
      label: '济南',
      children: [{
        value: 'baotuquan',
        label: '趵突泉',
      }],
    }],
  }, {
    value: 'longname-0',
    label: '名称很长的选项展示效果0',
    children: [{
      value: 'longname-0-0',
      label: '名称很长的选项展示效果0-0',
      children: [{
        value: 'longname-0-0-0',
        label: '名称很长的选项展示效果0-0-0',
      }],
    }],
  },
];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      demo6: ['xihu'],
    };
  }

  render() {
    return (
      <div>
        <div style={{ marginLeft: 20 }}>
          <h3>数据异步</h3>
          <p>
            （手动异步数据）
          </p>
          <p>
            <Button
              onClick={() => {
                this.setState({
                  demo6: ['xihu'],
                  asyncOptions6: options2,
                });
              }}
            >
              async
            </Button>
            &nbsp;
            <Button
              onClick={() => {
                this.setState({
                  demo6: ['xihu'],
                  asyncOptions6: options,
                });
              }}
            >init</Button>
          </p>
          <p>点击async更新options和value</p>
          <p>点击浙江/杭州/长兴，添加长兴的子集(原没有数据)</p>
        </div>
        <div style={{ position: 'relative', margin: 15 }}>
          <CascadeMultiSelect
            options={this.state.asyncOptions6}
            value={this.state.demo6}
            onSelect={(valueList) => {
              this.setState({ demo6: valueList });
            }}
            onItemClick={(item) => {
              console.log('onItemClick', item);
              if (item.value === 'changxing') {
                this.setState({
                  asyncOptions6: options2,
                });
              }
            }}
          />
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-multi-select-demo-async'));

直接使用面板

import { CascadeMultiSelect } from 'uxcore';
const { CascadeMultiPanel } = CascadeMultiSelect;
const options2 = [
  {
    value: 'zhejiang',
    label: '浙江',
    children: [{
      value: 'hangzhou',
      label: '杭州',
      children: [{
        value: 'xihu',
        label: '西湖',
      }, {
        value: 'bingjiang',
        label: '滨江',
      }, {
        value: 'shangcheng',
        label: '上城',
      }, {
        value: 'yuhang',
        label: '余杭',
      }, {
        value: 'linping',
        label: '临平',
      }],
    }, {
      value: 'ningbo',
      label: '宁波',
      children: [{
        value: 'zhoushan',
        label: '舟山',
      }],
    }, {
      value: 'yiwu',
      label: '义乌',
      children: [{
        value: 'jinhua',
        label: '金华',
      }],
    }, {
      value: 'changxing',
      label: '长兴',
      children: [{
        value: 'changxingnan',
        label: '长兴南',
      }, {
        value: 'changxingbei',
        label: '长兴北',
      }],
    }, {
      value: 'jiaxing',
      label: '嘉兴',
      children: [],
    }, {
      value: 'wenzhou',
      label: '温州',
      children: [],
    }, {
      value: 'lishui',
      label: '丽水',
      children: [],
    }, {
      value: 'linan',
      label: '临安',
      children: [],
    }],
  }, {
    value: 'jiangsu',
    label: '江苏',
    children: [{
      value: 'nanjing',
      label: '南京',
      children: [{
        value: 'zhonghuamen',
        label: '中华门',
      }],
    }],
  }, {
    value: 'anhui',
    label: '安徽',
    children: [{
      value: 'hefei',
      label: '合肥',
      children: [{
        value: 'dashushan',
        label: '大蜀山',
      }],
    }],
  }, {
    value: 'shandong',
    label: '山东',
    children: [{
      value: 'jinan',
      label: '济南',
      children: [{
        value: 'baotuquan',
        label: '趵突泉',
      }],
    }],
  }, {
    value: 'longname-0',
    label: '名称很长的选项展示效果0',
    children: [{
      value: 'longname-0-0',
      label: '名称很长的选项展示效果0-0',
      children: [{
        value: 'longname-0-0-0',
        label: '名称很长的选项展示效果0-0-0',
      }],
    }],
  },
];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      demo9: ['bingjiang', 'ningbo', 'anhui', 'shandong', 'jiangsu', 'longname-0'],
    };
  }

  render() {
    return (
      <div style={{ margin: 15 }}>
        <div style={{ position: 'relative', margin: 15 }}>
          <CascadeMultiPanel
            options={options2}
            value={this.state.demo9}
            onSelect={(valueList, labelList, leafList) => {
              console.log(leafList);
              this.setState({
                demo9: valueList,
              });
            }}
            className={'ucms-panel'}
          />
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-multi-select-demo-panel'));

以 Dialog 的形式弹出

import { CascadeMultiSelect } from 'uxcore';
const { CascadeMultiModal } = CascadeMultiSelect;
const options2 = [
  {
    value: 'zhejiang',
    label: '浙江',
    children: [{
      value: 'hangzhou',
      label: '杭州',
      children: [{
        value: 'xihu',
        label: '西湖',
      }, {
        value: 'bingjiang',
        label: '滨江',
      }, {
        value: 'shangcheng',
        label: '上城',
      }, {
        value: 'yuhang',
        label: '余杭',
      }, {
        value: 'linping',
        label: '临平',
      }],
    }, {
      value: 'ningbo',
      label: '宁波',
      children: [{
        value: 'zhoushan',
        label: '舟山',
      }],
    }, {
      value: 'yiwu',
      label: '义乌',
      children: [{
        value: 'jinhua',
        label: '金华',
      }],
    }, {
      value: 'changxing',
      label: '长兴',
      children: [{
        value: 'changxingnan',
        label: '长兴南',
      }, {
        value: 'changxingbei',
        label: '长兴北',
      }],
    }, {
      value: 'jiaxing',
      label: '嘉兴',
      children: [],
    }, {
      value: 'wenzhou',
      label: '温州',
      children: [],
    }, {
      value: 'lishui',
      label: '丽水',
      children: [],
    }, {
      value: 'linan',
      label: '临安',
      children: [],
    }],
  }, {
    value: 'jiangsu',
    label: '江苏',
    children: [{
      value: 'nanjing',
      label: '南京',
      children: [{
        value: 'zhonghuamen',
        label: '中华门',
      }],
    }],
  }, {
    value: 'anhui',
    label: '安徽',
    children: [{
      value: 'hefei',
      label: '合肥',
      children: [{
        value: 'dashushan',
        label: '大蜀山',
      }],
    }],
  }, {
    value: 'shandong',
    label: '山东',
    children: [{
      value: 'jinan',
      label: '济南',
      children: [{
        value: 'baotuquan',
        label: '趵突泉',
      }],
    }],
  }, {
    value: 'longname-0',
    label: '名称很长的选项展示效果0',
    children: [{
      value: 'longname-0-0',
      label: '名称很长的选项展示效果0-0',
      children: [{
        value: 'longname-0-0-0',
        label: '名称很长的选项展示效果0-0-0',
      }],
    }],
  },
];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      demo10: ['bingjiang', 'ningbo', 'anhui', 'shandong', 'jiangsu', 'longname-0'],
    };
  }

  render() {
    return (
      <div style={{ margin: 15 }}>
        <CascadeMultiModal
          className={'ucms-modal'}
          options={options2}
          value={this.state.demo10}
          onOk={(valueList, labelList, leafList) => {
            console.log(valueList, labelList, leafList);
            this.setState({ demo10: valueList });
          }}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-multi-select-demo-modal'));

Props

选项	描述	类型	必填	默认值
prefixCls	默认的类名前缀	String	`false`	"kuma-cascade-multi"
className	自定义类名	String	`false`	""
dropdownClassName	dropdown 部分的定制类名	String	`false`	""
config	配置项	Array	`false`	[]
options	横向级联的数据	Array	`true`	[]
value	可由外部控制的值	Array	`false`	[]
defaultValue	初始默认的值	Array	`false`	[]
cascadeSize	级联层级数	number	`false`	3
placeholder	input占位符	string	`false`	'Please Select' 或 '请选择'
notFoundContent	没有子项级联数据时显示内容	String	`false`	'No Data' 或 '没有数据'
allowClear	是否允许清空	bool	`false`	true
disabled	禁用模式，只能看到结果，不可展开面板	bool	`false`	false
locale	'zh-cn' or 'en-us'	String	`false`	'zh-cn'
onSelect	选中选项的回调函数	function	`false`	(valueList, labelList, leafList) => {}
onItemClick	点击选项事件，返回选项信息	function	`false`	(item) => {}
onOk	点击确认按钮回调函数	function	`false`	(valueList, labelList, leafList) => {}
onCancel	取消选择时回调函数	function	`false`	() => {}

Props.config

示例

// 三级横向级联多选
const config = [{
  // 可以为空
}, {
  // 设置第二级不可选
  checkable: false,
}, {
}];

不传 config 时，checkable: true

每一列的 config 可以只配置需要的 key, 不需要全部指定，如上示例

完整 config

// 三级横向级联多选
const config = [{
  checkable: true,
}, {
  checkable: true,
}, {
  checkable: true,
}];

Props.options

选项	描述	类型	必填	默认值
value	选项的值	String	`true`	""
label	选项的名称	String	`true`	""
children	选项的子项集	Array	`false`	[]

示例

const options = [{
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

Props.value

const value = ['xihu', 'bingjiang'];

示例

<CascadeMultiSelect
  options={options}
  value={['xihu', 'nanjing']}
/>;

onSelect

(valueList, labelList, leafList) => {
  valueList: 选中选项的value列表
  labelList: 选中选项的label列表
  leafList: 选中所有子项的{value, label}列表
}

注：如果选项的子集全部选中，则返回该选项值

CascadeMultiPanel

API

Props

选项	描述	类型	必填	默认值
className	自定义类名	String	`false`	""
prefixCls	默认的类名前缀	String	`false`	"kuma-cascade-multi"
config	配置项	Array	`false`	[]
options	横向级联的数据	Array	`true`	[]
value	可由外部控制的值	Array	`false`	[]
cascadeSize	级联层级数	number	`false`	3
notFoundContent	没有子项级联数据时显示内容	String	`false`	'No Data' 或 '没有数据'
allowClear	是否允许清空	bool	`false`	true
locale	'zh-cn' or 'en-us'	String	`false`	'zh-cn'
onSelect	选中选项的回调函数	function	`false`	(valueList, labelList, leafList) => {}
onItemClick	点击选项事件，返回选项信息	function	`false`	(item) => {}

CascadeMultiModal

API

Props

选项	描述	类型	必填	默认值
prefixCls	默认的类名前缀	String	`false`	"kuma-cascade-multi"
className	自定义类名	String	`false`	""
config	配置项	Array	`false`	[]
options	横向级联的数据	Array	`true`	[]
value	可由外部控制的值	Array	`false`	[]
cascadeSize	级联层级数	number	`false`	3
notFoundContent	没有子项级联数据时显示内容	String	`false`	'No Data' 或 '没有数据'
allowClear	是否允许清空	bool	`false`	true
locale	'zh-cn' or 'en-us'	String	`false`	'zh-cn'
onSelect	选中选项的回调函数	function	`false`	(valueList, labelList, leafList) => {}
onItemClick	点击选项事件，返回选项信息	function	`false`	(item) => {}
title	标题	String	`false`	'级联选择'
width	dialog 宽度	Number	`false`	672
onOk	成功按钮回调函数	Function	`false`	(valueList, labelList, leafList) => {}
onCancel	取消的回调函数	Function	`false`	() => {}

props 复用 uxcore-cascade-multi-select 的 props.

继承了部分Dialog的props,

onOk

(valueList, labelList, leafList) => {
  valueList: 选中选项的value列表
  labelList: 选中选项的label列表
  leafList: 选中所有子项的{value, label}列表
}

使用方法

import CascadeMultiSelect from 'uxcore-cascade-multi-select';

const {
  CascadeMultiPanel,
  CascadeMultiModal,
} = CascadeMultiSelect;

render() {
  return () {
    <div>
      <CascadeMultiPanel />
      <CascadeMultiSelect />
      <CascadeMultiModal />
    </div>
  }
}