组件演示

[{"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<p>最简单的用法。</p>\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\"><span class=\"hljs-keyword\">import</span> { CascadeMultiSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> options = [\n {\n value: <span class=\"hljs-string\">'zhejiang'</span>,\n label: <span class=\"hljs-string\">'浙江'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hangzhou'</span>,\n label: <span class=\"hljs-string\">'杭州'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xihu'</span>,\n label: <span class=\"hljs-string\">'西湖'</span>,\n }, {\n value: <span class=\"hljs-string\">'bingjiang'</span>,\n label: <span class=\"hljs-string\">'滨江'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'ningbo'</span>,\n label: <span class=\"hljs-string\">'宁波'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhoushan'</span>,\n label: <span class=\"hljs-string\">'舟山'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'yiwu'</span>,\n label: <span class=\"hljs-string\">'义乌'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinhua'</span>,\n label: <span class=\"hljs-string\">'金华'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'changxing'</span>,\n label: <span class=\"hljs-string\">'长兴'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'jiaxing'</span>,\n label: <span class=\"hljs-string\">'嘉兴'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'wenzhou'</span>,\n label: <span class=\"hljs-string\">'温州'</span>,\n }, {\n value: <span class=\"hljs-string\">'lishui'</span>,\n label: <span class=\"hljs-string\">'丽水'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'linan'</span>,\n label: <span class=\"hljs-string\">'临安'</span>,\n children: [],\n }],\n }, {\n value: <span class=\"hljs-string\">'jiangsu'</span>,\n label: <span class=\"hljs-string\">'江苏'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjing'</span>,\n label: <span class=\"hljs-string\">'南京'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonghuamen'</span>,\n label: <span class=\"hljs-string\">'中华门'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'shandong'</span>,\n label: <span class=\"hljs-string\">'山东'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinan'</span>,\n label: <span class=\"hljs-string\">'济南'</span>,\n children: [{\n value: <span class=\"hljs-string\">'baotuquan'</span>,\n label: <span class=\"hljs-string\">'趵突泉'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'longname-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0-0'</span>,\n }],\n }],\n },\n];\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n demo1: [<span class=\"hljs-string\">'shanghai'</span>],\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">margin:</span> <span class=\"hljs-attribute\">15</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CascadeMultiSelect</span>\n <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">{'ucms-input'}</span>\n <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">{'ucms-drop'}</span>\n <span class=\"hljs-attribute\">options</span>=<span class=\"hljs-value\">{options}</span>\n <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{(valueList,</span> <span class=\"hljs-attribute\">labelList</span>, <span class=\"hljs-attribute\">leafList</span>) =&gt;</span> {\n console.log(valueList, labelList, leafList);\n this.setState({ demo1: valueList });\n }}\n onOk={(valueList, labelList, leafList) =&gt; {\n console.log(valueList, labelList, leafList);\n }}\n value={this.state.demo1}\n /&gt;\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-cascade-multi-select-demo-basic'));</span></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\"><span class=\"hljs-keyword\">import</span> { CascadeMultiSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> options2 = [\n {\n value: <span class=\"hljs-string\">'zhejiang'</span>,\n label: <span class=\"hljs-string\">'浙江'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hangzhou'</span>,\n label: <span class=\"hljs-string\">'杭州'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xihu'</span>,\n label: <span class=\"hljs-string\">'西湖'</span>,\n }, {\n value: <span class=\"hljs-string\">'bingjiang'</span>,\n label: <span class=\"hljs-string\">'滨江'</span>,\n }, {\n value: <span class=\"hljs-string\">'shangcheng'</span>,\n label: <span class=\"hljs-string\">'上城'</span>,\n }, {\n value: <span class=\"hljs-string\">'yuhang'</span>,\n label: <span class=\"hljs-string\">'余杭'</span>,\n }, {\n value: <span class=\"hljs-string\">'linping'</span>,\n label: <span class=\"hljs-string\">'临平'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'ningbo'</span>,\n label: <span class=\"hljs-string\">'宁波'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhoushan'</span>,\n label: <span class=\"hljs-string\">'舟山'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'yiwu'</span>,\n label: <span class=\"hljs-string\">'义乌'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinhua'</span>,\n label: <span class=\"hljs-string\">'金华'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'changxing'</span>,\n label: <span class=\"hljs-string\">'长兴'</span>,\n children: [{\n value: <span class=\"hljs-string\">'changxingnan'</span>,\n label: <span class=\"hljs-string\">'长兴南'</span>,\n }, {\n value: <span class=\"hljs-string\">'changxingbei'</span>,\n label: <span class=\"hljs-string\">'长兴北'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'jiaxing'</span>,\n label: <span class=\"hljs-string\">'嘉兴'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'wenzhou'</span>,\n label: <span class=\"hljs-string\">'温州'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'lishui'</span>,\n label: <span class=\"hljs-string\">'丽水'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'linan'</span>,\n label: <span class=\"hljs-string\">'临安'</span>,\n children: [],\n }],\n }, {\n value: <span class=\"hljs-string\">'jiangsu'</span>,\n label: <span class=\"hljs-string\">'江苏'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjing'</span>,\n label: <span class=\"hljs-string\">'南京'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonghuamen'</span>,\n label: <span class=\"hljs-string\">'中华门'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'anhui'</span>,\n label: <span class=\"hljs-string\">'安徽'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hefei'</span>,\n label: <span class=\"hljs-string\">'合肥'</span>,\n children: [{\n value: <span class=\"hljs-string\">'dashushan'</span>,\n label: <span class=\"hljs-string\">'大蜀山'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'shandong'</span>,\n label: <span class=\"hljs-string\">'山东'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinan'</span>,\n label: <span class=\"hljs-string\">'济南'</span>,\n children: [{\n value: <span class=\"hljs-string\">'baotuquan'</span>,\n label: <span class=\"hljs-string\">'趵突泉'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'longname-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0-0'</span>,\n }],\n }],\n },\n];\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n demo3: [<span class=\"hljs-string\">'xihu'</span>],\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">margin:</span> <span class=\"hljs-attribute\">15</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CascadeMultiSelect</span>\n <span class=\"hljs-attribute\">options</span>=<span class=\"hljs-value\">{options2}</span>\n <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.demo3}</span>\n <span class=\"hljs-attribute\">disabled</span>\n /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-cascade-multi-select-demo-disabled'));</span></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<p>设置前两级 checkable: false</p>\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\"><span class=\"hljs-keyword\">import</span> { CascadeMultiSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> options2 = [\n {\n value: <span class=\"hljs-string\">'zhejiang'</span>,\n label: <span class=\"hljs-string\">'浙江'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hangzhou'</span>,\n label: <span class=\"hljs-string\">'杭州'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xihu'</span>,\n label: <span class=\"hljs-string\">'西湖'</span>,\n }, {\n value: <span class=\"hljs-string\">'bingjiang'</span>,\n label: <span class=\"hljs-string\">'滨江'</span>,\n }, {\n value: <span class=\"hljs-string\">'shangcheng'</span>,\n label: <span class=\"hljs-string\">'上城'</span>,\n }, {\n value: <span class=\"hljs-string\">'yuhang'</span>,\n label: <span class=\"hljs-string\">'余杭'</span>,\n }, {\n value: <span class=\"hljs-string\">'linping'</span>,\n label: <span class=\"hljs-string\">'临平'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'ningbo'</span>,\n label: <span class=\"hljs-string\">'宁波'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhoushan'</span>,\n label: <span class=\"hljs-string\">'舟山'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'yiwu'</span>,\n label: <span class=\"hljs-string\">'义乌'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinhua'</span>,\n label: <span class=\"hljs-string\">'金华'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'changxing'</span>,\n label: <span class=\"hljs-string\">'长兴'</span>,\n children: [{\n value: <span class=\"hljs-string\">'changxingnan'</span>,\n label: <span class=\"hljs-string\">'长兴南'</span>,\n }, {\n value: <span class=\"hljs-string\">'changxingbei'</span>,\n label: <span class=\"hljs-string\">'长兴北'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'jiaxing'</span>,\n label: <span class=\"hljs-string\">'嘉兴'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'wenzhou'</span>,\n label: <span class=\"hljs-string\">'温州'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'lishui'</span>,\n label: <span class=\"hljs-string\">'丽水'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'linan'</span>,\n label: <span class=\"hljs-string\">'临安'</span>,\n children: [],\n }],\n }, {\n value: <span class=\"hljs-string\">'jiangsu'</span>,\n label: <span class=\"hljs-string\">'江苏'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjing'</span>,\n label: <span class=\"hljs-string\">'南京'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonghuamen'</span>,\n label: <span class=\"hljs-string\">'中华门'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'anhui'</span>,\n label: <span class=\"hljs-string\">'安徽'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hefei'</span>,\n label: <span class=\"hljs-string\">'合肥'</span>,\n children: [{\n value: <span class=\"hljs-string\">'dashushan'</span>,\n label: <span class=\"hljs-string\">'大蜀山'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'shandong'</span>,\n label: <span class=\"hljs-string\">'山东'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinan'</span>,\n label: <span class=\"hljs-string\">'济南'</span>,\n children: [{\n value: <span class=\"hljs-string\">'baotuquan'</span>,\n label: <span class=\"hljs-string\">'趵突泉'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'longname-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0-0'</span>,\n }],\n }],\n },\n];\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n demo5: [<span class=\"hljs-string\">'bingjiang'</span>, <span class=\"hljs-string\">'ningbo'</span>, <span class=\"hljs-string\">'anhui'</span>, <span class=\"hljs-string\">'shandong'</span>],\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">margin:</span> <span class=\"hljs-attribute\">15</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CascadeMultiSelect</span>\n <span class=\"hljs-attribute\">config</span>=<span class=\"hljs-value\">{</span>\n [{\n <span class=\"hljs-attribute\">checkable:</span> <span class=\"hljs-attribute\">false</span>,\n }, {\n <span class=\"hljs-attribute\">checkable:</span> <span class=\"hljs-attribute\">false</span>,\n }, {}]\n }\n <span class=\"hljs-attribute\">options</span>=<span class=\"hljs-value\">{options2}</span>\n <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.demo5}</span>\n /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-cascade-multi-select-demo-disabled2level'));</span></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\"><span class=\"hljs-keyword\">import</span> { CascadeMultiSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> options2 = [\n {\n value: <span class=\"hljs-string\">'zhejiang'</span>,\n label: <span class=\"hljs-string\">'浙江'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hangzhou'</span>,\n label: <span class=\"hljs-string\">'杭州'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xihu'</span>,\n label: <span class=\"hljs-string\">'西湖'</span>,\n }, {\n value: <span class=\"hljs-string\">'bingjiang'</span>,\n label: <span class=\"hljs-string\">'滨江'</span>,\n }, {\n value: <span class=\"hljs-string\">'shangcheng'</span>,\n label: <span class=\"hljs-string\">'上城'</span>,\n }, {\n value: <span class=\"hljs-string\">'yuhang'</span>,\n label: <span class=\"hljs-string\">'余杭'</span>,\n }, {\n value: <span class=\"hljs-string\">'linping'</span>,\n label: <span class=\"hljs-string\">'临平'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'ningbo'</span>,\n label: <span class=\"hljs-string\">'宁波'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhoushan'</span>,\n label: <span class=\"hljs-string\">'舟山'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'yiwu'</span>,\n label: <span class=\"hljs-string\">'义乌'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinhua'</span>,\n label: <span class=\"hljs-string\">'金华'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'changxing'</span>,\n label: <span class=\"hljs-string\">'长兴'</span>,\n children: [{\n value: <span class=\"hljs-string\">'changxingnan'</span>,\n label: <span class=\"hljs-string\">'长兴南'</span>,\n }, {\n value: <span class=\"hljs-string\">'changxingbei'</span>,\n label: <span class=\"hljs-string\">'长兴北'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'jiaxing'</span>,\n label: <span class=\"hljs-string\">'嘉兴'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'wenzhou'</span>,\n label: <span class=\"hljs-string\">'温州'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'lishui'</span>,\n label: <span class=\"hljs-string\">'丽水'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'linan'</span>,\n label: <span class=\"hljs-string\">'临安'</span>,\n children: [],\n }],\n }, {\n value: <span class=\"hljs-string\">'jiangsu'</span>,\n label: <span class=\"hljs-string\">'江苏'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjing'</span>,\n label: <span class=\"hljs-string\">'南京'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonghuamen'</span>,\n label: <span class=\"hljs-string\">'中华门'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'anhui'</span>,\n label: <span class=\"hljs-string\">'安徽'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hefei'</span>,\n label: <span class=\"hljs-string\">'合肥'</span>,\n children: [{\n value: <span class=\"hljs-string\">'dashushan'</span>,\n label: <span class=\"hljs-string\">'大蜀山'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'shandong'</span>,\n label: <span class=\"hljs-string\">'山东'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinan'</span>,\n label: <span class=\"hljs-string\">'济南'</span>,\n children: [{\n value: <span class=\"hljs-string\">'baotuquan'</span>,\n label: <span class=\"hljs-string\">'趵突泉'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'longname-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0-0'</span>,\n }],\n }],\n },\n];\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n demo6: [<span class=\"hljs-string\">'xihu'</span>],\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> <span class=\"hljs-attribute\">20</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h3</span>&gt;</span>数据异步<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h3</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>\n (手动异步数据)\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>\n <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{()</span> =&gt;</span> {\n this.setState({\n demo6: ['xihu'],\n asyncOptions6: options2,\n });\n }}\n &gt;\n async\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n &amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>\n <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{()</span> =&gt;</span> {\n this.setState({\n demo6: ['xihu'],\n asyncOptions6: options,\n });\n }}\n &gt;init<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>点击async更新options和value<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>点击浙江/杭州/长兴,添加长兴的子集(原没有数据)<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">position:</span> '<span class=\"hljs-attribute\">relative</span>', <span class=\"hljs-attribute\">margin:</span> <span class=\"hljs-attribute\">15</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CascadeMultiSelect</span>\n <span class=\"hljs-attribute\">options</span>=<span class=\"hljs-value\">{this.state.asyncOptions6}</span>\n <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.demo6}</span>\n <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{(valueList)</span> =&gt;</span> {\n this.setState({ demo6: valueList });\n }}\n onItemClick={(item) =&gt; {\n console.log('onItemClick', item);\n if (item.value === 'changxing') {\n this.setState({\n asyncOptions6: options2,\n });\n }\n }}\n /&gt;\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-cascade-multi-select-demo-async'));</span></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\"><span class=\"hljs-keyword\">import</span> { CascadeMultiSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> { CascadeMultiPanel } = CascadeMultiSelect;\n<span class=\"hljs-keyword\">const</span> options2 = [\n {\n value: <span class=\"hljs-string\">'zhejiang'</span>,\n label: <span class=\"hljs-string\">'浙江'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hangzhou'</span>,\n label: <span class=\"hljs-string\">'杭州'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xihu'</span>,\n label: <span class=\"hljs-string\">'西湖'</span>,\n }, {\n value: <span class=\"hljs-string\">'bingjiang'</span>,\n label: <span class=\"hljs-string\">'滨江'</span>,\n }, {\n value: <span class=\"hljs-string\">'shangcheng'</span>,\n label: <span class=\"hljs-string\">'上城'</span>,\n }, {\n value: <span class=\"hljs-string\">'yuhang'</span>,\n label: <span class=\"hljs-string\">'余杭'</span>,\n }, {\n value: <span class=\"hljs-string\">'linping'</span>,\n label: <span class=\"hljs-string\">'临平'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'ningbo'</span>,\n label: <span class=\"hljs-string\">'宁波'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhoushan'</span>,\n label: <span class=\"hljs-string\">'舟山'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'yiwu'</span>,\n label: <span class=\"hljs-string\">'义乌'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinhua'</span>,\n label: <span class=\"hljs-string\">'金华'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'changxing'</span>,\n label: <span class=\"hljs-string\">'长兴'</span>,\n children: [{\n value: <span class=\"hljs-string\">'changxingnan'</span>,\n label: <span class=\"hljs-string\">'长兴南'</span>,\n }, {\n value: <span class=\"hljs-string\">'changxingbei'</span>,\n label: <span class=\"hljs-string\">'长兴北'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'jiaxing'</span>,\n label: <span class=\"hljs-string\">'嘉兴'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'wenzhou'</span>,\n label: <span class=\"hljs-string\">'温州'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'lishui'</span>,\n label: <span class=\"hljs-string\">'丽水'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'linan'</span>,\n label: <span class=\"hljs-string\">'临安'</span>,\n children: [],\n }],\n }, {\n value: <span class=\"hljs-string\">'jiangsu'</span>,\n label: <span class=\"hljs-string\">'江苏'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjing'</span>,\n label: <span class=\"hljs-string\">'南京'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonghuamen'</span>,\n label: <span class=\"hljs-string\">'中华门'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'anhui'</span>,\n label: <span class=\"hljs-string\">'安徽'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hefei'</span>,\n label: <span class=\"hljs-string\">'合肥'</span>,\n children: [{\n value: <span class=\"hljs-string\">'dashushan'</span>,\n label: <span class=\"hljs-string\">'大蜀山'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'shandong'</span>,\n label: <span class=\"hljs-string\">'山东'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinan'</span>,\n label: <span class=\"hljs-string\">'济南'</span>,\n children: [{\n value: <span class=\"hljs-string\">'baotuquan'</span>,\n label: <span class=\"hljs-string\">'趵突泉'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'longname-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0-0'</span>,\n }],\n }],\n },\n];\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n demo9: [<span class=\"hljs-string\">'bingjiang'</span>, <span class=\"hljs-string\">'ningbo'</span>, <span class=\"hljs-string\">'anhui'</span>, <span class=\"hljs-string\">'shandong'</span>, <span class=\"hljs-string\">'jiangsu'</span>, <span class=\"hljs-string\">'longname-0'</span>],\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">margin:</span> <span class=\"hljs-attribute\">15</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">position:</span> '<span class=\"hljs-attribute\">relative</span>', <span class=\"hljs-attribute\">margin:</span> <span class=\"hljs-attribute\">15</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CascadeMultiPanel</span>\n <span class=\"hljs-attribute\">options</span>=<span class=\"hljs-value\">{options2}</span>\n <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.demo9}</span>\n <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{(valueList,</span> <span class=\"hljs-attribute\">labelList</span>, <span class=\"hljs-attribute\">leafList</span>) =&gt;</span> {\n console.log(leafList);\n this.setState({\n demo9: valueList,\n });\n }}\n className={'ucms-panel'}\n /&gt;\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-cascade-multi-select-demo-panel'));</span></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\"><span class=\"hljs-keyword\">import</span> { CascadeMultiSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> { CascadeMultiModal } = CascadeMultiSelect;\n<span class=\"hljs-keyword\">const</span> options2 = [\n {\n value: <span class=\"hljs-string\">'zhejiang'</span>,\n label: <span class=\"hljs-string\">'浙江'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hangzhou'</span>,\n label: <span class=\"hljs-string\">'杭州'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xihu'</span>,\n label: <span class=\"hljs-string\">'西湖'</span>,\n }, {\n value: <span class=\"hljs-string\">'bingjiang'</span>,\n label: <span class=\"hljs-string\">'滨江'</span>,\n }, {\n value: <span class=\"hljs-string\">'shangcheng'</span>,\n label: <span class=\"hljs-string\">'上城'</span>,\n }, {\n value: <span class=\"hljs-string\">'yuhang'</span>,\n label: <span class=\"hljs-string\">'余杭'</span>,\n }, {\n value: <span class=\"hljs-string\">'linping'</span>,\n label: <span class=\"hljs-string\">'临平'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'ningbo'</span>,\n label: <span class=\"hljs-string\">'宁波'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhoushan'</span>,\n label: <span class=\"hljs-string\">'舟山'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'yiwu'</span>,\n label: <span class=\"hljs-string\">'义乌'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinhua'</span>,\n label: <span class=\"hljs-string\">'金华'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'changxing'</span>,\n label: <span class=\"hljs-string\">'长兴'</span>,\n children: [{\n value: <span class=\"hljs-string\">'changxingnan'</span>,\n label: <span class=\"hljs-string\">'长兴南'</span>,\n }, {\n value: <span class=\"hljs-string\">'changxingbei'</span>,\n label: <span class=\"hljs-string\">'长兴北'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'jiaxing'</span>,\n label: <span class=\"hljs-string\">'嘉兴'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'wenzhou'</span>,\n label: <span class=\"hljs-string\">'温州'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'lishui'</span>,\n label: <span class=\"hljs-string\">'丽水'</span>,\n children: [],\n }, {\n value: <span class=\"hljs-string\">'linan'</span>,\n label: <span class=\"hljs-string\">'临安'</span>,\n children: [],\n }],\n }, {\n value: <span class=\"hljs-string\">'jiangsu'</span>,\n label: <span class=\"hljs-string\">'江苏'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjing'</span>,\n label: <span class=\"hljs-string\">'南京'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonghuamen'</span>,\n label: <span class=\"hljs-string\">'中华门'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'anhui'</span>,\n label: <span class=\"hljs-string\">'安徽'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hefei'</span>,\n label: <span class=\"hljs-string\">'合肥'</span>,\n children: [{\n value: <span class=\"hljs-string\">'dashushan'</span>,\n label: <span class=\"hljs-string\">'大蜀山'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'shandong'</span>,\n label: <span class=\"hljs-string\">'山东'</span>,\n children: [{\n value: <span class=\"hljs-string\">'jinan'</span>,\n label: <span class=\"hljs-string\">'济南'</span>,\n children: [{\n value: <span class=\"hljs-string\">'baotuquan'</span>,\n label: <span class=\"hljs-string\">'趵突泉'</span>,\n }],\n }],\n }, {\n value: <span class=\"hljs-string\">'longname-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0'</span>,\n children: [{\n value: <span class=\"hljs-string\">'longname-0-0-0'</span>,\n label: <span class=\"hljs-string\">'名称很长的选项展示效果0-0-0'</span>,\n }],\n }],\n },\n];\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n demo10: [<span class=\"hljs-string\">'bingjiang'</span>, <span class=\"hljs-string\">'ningbo'</span>, <span class=\"hljs-string\">'anhui'</span>, <span class=\"hljs-string\">'shandong'</span>, <span class=\"hljs-string\">'jiangsu'</span>, <span class=\"hljs-string\">'longname-0'</span>],\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">margin:</span> <span class=\"hljs-attribute\">15</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CascadeMultiModal</span>\n <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">{'ucms-modal'}</span>\n <span class=\"hljs-attribute\">options</span>=<span class=\"hljs-value\">{options2}</span>\n <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.demo10}</span>\n <span class=\"hljs-attribute\">onOk</span>=<span class=\"hljs-value\">{(valueList,</span> <span class=\"hljs-attribute\">labelList</span>, <span class=\"hljs-attribute\">leafList</span>) =&gt;</span> {\n console.log(valueList, labelList, leafList);\n this.setState({ demo10: valueList });\n }}\n /&gt;\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-cascade-multi-select-demo-modal'));</span></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'));
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>
  }
}